<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Dropdown menu</title>
<link rel="stylesheet" href="base.css" />
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
</head>
<body>
<style>
.t-list{ margin-top: 20px;}
.t-list li{ float: left; width: 100px; text-align: center; background: #eee;}
.item{ color: #f60; font-weight: bold;}
.info{ display: none;}
</style>
<ul id="list" class="g-w t-list">
<li>
<a href="###">列表一</a>
<div class="info">Menu 1</div>
<div class="info">Menu 2</div>
<div class="info">Menu three</div>
<div class="info">Menu four</div>
</li>
<li>
<a href="###">列表二</a>
<div class="info">Menu 1</div>
<div class="info">Menu 2</div>
<div class="info">Menu three</div>
</li>
<li>
<a href="###">列表三</a>
<div class="info">Menu 1</div>
<div class="info">Menu 2</div>
</li>
<li>
<a href="###">列表四</a>
<div class="info">Menu 1</div>
<div class="info">Menu 2</div>
<div class="info">Menu three</div>
<div class="info">Menu four</div>
<div class="info">Wu Zheran</div>
</li>
</ul>
<div class="g-w" style="padding-top: 120px;">
<em>Reading who asks the king to recite, the water falls and the fragrance floats. </em>
<button class="btn1">Click here</button>
</div>
<div class="g-w" style="padding-top: 60px;">
<span>One-stop shared network</span>
<button class="btn2">click here</button>
</div>
<script>
$(function() {
// Drop-down menu
downMenu ();
demo1();
demo2();
});
function downMenu(){
The //bind() method adds one or more event handlers to the selected element and specifies a function to run when the event occurs.
$('#list').find('li').bind({
mouseenter: function(){
$(this).children('a').addClass('item').end().find('.info').show();
},
mouseleave: function(){
$(this).children('a').removeClass('item').end().find('.info').hide();
}
});
}
function demo1(){
//$(selector).bind(event,data,function)
$(".btn1").bind("click",function(){
$("em").slideToggle();
});
}
function demo2(){
//$(selector).bind({event:function, event:function, ...})
$(".btn2").bind({
click:function(){$("span").slideToggle();},
mouseover:function(){$("body").css("background-color","#f60");},
mouseout:function(){$("body").css("background-color","#fff");}
});
}
//Extended reading: http://onestopweb.iteye.com/blog/2356131
</script>
</body>
</html>
Effect picture: