jQuery手风琴导航菜单详解
本章节分享一个代码实例，它实现了简单的手风琴导航菜单效果。
下面详细介绍一下它的实现过程，需要的朋友可以做一下参考。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.nav ul {
display: none;
}
.nav ul li {
width: 100px;
text-align: center;
cursor: pointer;
}
.nav div {
background: #4ecc70;
width: 100px;
border-radius: 10px;
line-height: 34px;
text-align: center;
color: white;
cursor: pointer;
}
.red {
background: red;
border-radius: 10px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function () {
var changeType = $('.nav').find('div');
$.each(changeType, function () {
$(this).on('click', function () {
if (false == $(this).next().is(':visible')) {
$('.nav ul').slideUp(300);
}
$(this).next().slideToggle(300);
})
$('.nav ul:eq(0)').show();
})
var hoverType = $('.nav .u').find('li')
$.each(hoverType, function () {
$(this).hover(function () {
$(this).addClass('red').siblings().removeClass('red');
})
})
})
</script>
</head>
<body>
<ul class="nav">
<li>
<div>前端</div>
<ul class="u">
<li>div教程</li>
<li>css教程</li>
<li>html教程</li>
<li>js教程</li>
</ul>
</li>
<li>
<div>资源</div>
<ul class="u">
<li>特效</li>
<li>模板</li>
<li>代码</li>
<li>书籍</li>
</ul>
</li>
<li>
<div>讨论</div>
<ul class="u">
<li>交流</li>
<li>分享</li>
<li>互助</li>
<li>问答</li>
</ul>
</li>
</ul>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.$(function () {})，当文档结构完全加载完毕再去执行函数中的代码。
（2）.var changeType = $('.nav').find('div')，获取class属性值为nav元素下的div元素集合。
（3）.$.each(changeType, function () {})，遍历changeType集合中的每一个div元素。
（4）.$(this).on('click', function () {})，为当前的div元素注册click事件处理函数。
（5）.if (false == $(this).next().is(':visible')) {
$('.nav ul').slideUp(300);
}
如果当前div元素的下一个元素，也就是ul元素不是显示状态.
那么首先首先将所有的ul元素收起（这个保证了只有一个ul元素是展开状态）。
（6）.$(this).next().slideToggle(300),展开和关闭的切换。
（7）.$('.nav ul:eq(0)').show()，设置第一个ul元素默认是展开的。
（8）.var hoverType = $('.nav .u').find('li')，获取ul元素下所有的li元素。
（9）.$.each(hoverType, function () {
$(this).hover(function () {
$(this).addClass('red').siblings().removeClass('red');
})
})，为每一个li元素注册hover事件处理函数，设置当鼠标悬浮时，背景色变红，移开时恢复。
二.相关阅读:
（1）.find()可以参阅jQuery find()一章节。
（2）.$.each()可以参阅jQuery.each()一章节。
（3）.on()可以参阅jquery on()一章节。
（4）.next()可以参阅jQuery next()一章节。
（5）.is()可以参阅jQuery is()一章节。
（6）.slideUp()可以参阅jQuery slideUp()一章节。
（7）.slideToggle()可以参阅jQuery slideToggle()一章节。
（8）.:eq()可以参阅jQuery :eq()一章节。
（9）.:visible可以参阅jQuery :visible一章节。
（10）.hover()可以参阅jQuery hover事件一章节。
（11）.addClass()可以参阅jQuery addClass()一章节。
（12）.siblings()可以参阅jQuery siblings()一章节。