<!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>
效果圖：
