<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>下拉菜单</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">菜单一</div>
<div class="info">菜单二</div>
<div class="info">菜单三</div>
<div class="info">菜单四</div>
</li>
<li>
<a href="###">列表二</a>
<div class="info">菜单一</div>
<div class="info">菜单二</div>
<div class="info">菜单三</div>
</li>
<li>
<a href="###">列表三</a>
<div class="info">菜单一</div>
<div class="info">菜单二</div>
</li>
<li>
<a href="###">列表四</a>
<div class="info">菜单一</div>
<div class="info">菜单二</div>
<div class="info">菜单三</div>
<div class="info">菜单四</div>
<div class="info">吴者然</div>
</li>
</ul>
<div class="g-w" style="padding-top: 120px;">
<em>阅谁问君诵，水落清香浮。</em>
<button class="btn1">请点击这里</button>
</div>
<div class="g-w" style="padding-top: 60px;">
<span>一站式共享网络</span>
<button class="btn2">请点击这里</button>
</div>
<script>
$(function() {
// 下拉菜单
downMenu();
demo1();
demo2();
});
function downMenu(){
//bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
$('#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");}
});
}
//拓展阅读：http://onestopweb.iteye.com/blog/2356131
</script>
</body>
</html>
效果图：
扫描二维码关注公众号，回复：
302535 查看本文章
