1.一個簡單的水平菜單
<!DOCTYPE html>
<html lang="zn">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/my.css">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<title>水平菜單</title>
<style>
nav .main a{
display: block;
width: 100px;
height: 30px;
line-height: 30px;
background-color: #aaa;
text-align: center;
border-bottom: 1px solid #000;
}
nav .main a:hover{
background-color: red;
}
.main ul{
display: none;
}
.main>li{
float: left;
}
</style>
<script>
jQuery(document).ready(function($) {
$(".main>li").hover(function() {
$(this).children("ul").slideToggle(400);
});
});
</script>
</head>
<body>
<nav>
<ul class="main">
<li><a href="#">菜單一</a>
<ul>
<li><a href="">子菜單1</a></li>
<li><a href="">子菜單2</a></li>
<li><a href="">子菜單3</a></li>
</ul>
</li>
<li><a href="#">菜單二</a>
<ul>
<li><a href="">子菜單1</a></li>
<li><a href="">子菜單2</a></li>
<li><a href="">子菜單3</a></li>
</ul>
</li>
<li><a href="#">菜單三</a>
<ul>
<li><a href="">子菜單1</a></li>
<li><a href="">子菜單2</a></li>
<li><a href="">子菜單3</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
//當鼠標在菜單上快速滑動時，會同時有多個子菜單在不停的顯示、隱藏2.使用:animated來檢測動畫的執行
jQuery(document).ready(function($) {
$(".main>li").hover(function() {
if(!$(".main ul").is(":animated")){
$(this).children("ul").slideToggle(400);
}
});
});
//使用:animated保證了只有在前一次的動畫結束後，下一次的動畫纔會開始執行
//但是會導致子菜單未收起的情況3.使用stop()方法來停止重複動畫
jQuery(document).ready(function($) {
$(".main>li").hover(function() {
$(this).children("ul").slideDown();
}, function() {
$(this).children("ul").stop(true,false).slideUp();
});
});
//完美解決4.stop()方法介紹
stop([clearQueue],[jumpToEnd]);
clearQueue:如果設置成true，則清空隊列，可以立即結束動畫。
jumpToEnd:如果設置成true，則完成隊列，可以立即完成動畫。可選，默認是false5.使用toggle()方法替代
jQuery(document).ready(function($) {
$(".main>li").hover(function() {
$(this).children("ul").toggle();
});
});