jQuery点击展开折叠手风琴导航菜单详解
分类：实例代码
分享一段代码实例，它实现了手风琴式导航菜单效果。
代码实例如下:
]
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
* {
padding: 0;
margin: 0;
border: none;
list-style: none;
}
.nav {
width: 200px;
height: auto;
margin: 50px auto;
}
.nav li span {
width: 185px;
height: 45px;
line-height: 45px;
color: #333;
display: block;
padding-left: 15px;
background: #999 ;
cursor: pointer;
border-bottom: 1px solid #fff;
}
.side_nav {
display: none;
}
.side_nav li {
width:185px;
height:45px;
line-height:45px;
background:#ccc;
color:#333;
display:block;
padding-left: 15px;
border-bottom: 1px solid #fff;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
$(".nav li span").click(function(){
if ($(this).siblings('ul').css('display')=='none') {
$(this).siblings('ul').slideDown(100);
}else{
$(this).siblings('ul').slideUp(100);
}
});
});
</script>
</head>
<body>
<ul class="nav">
<li>
<span>前端教程网一</span>
<ul class="side_nav">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>
<span>前端教程网二</span>
<ul class="side_nav">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>
<span>前端教程网三</span>
<ul class="side_nav">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
* {
padding: 0;
margin: 0;
border: none;
list-style: none;
}
进行一些初始化操作，设置内外边距为0，去掉列表的默认样式或者元素的默认边框。
.nav {
width: 200px;
height: auto;
margin: 50px auto;
}
设置导航菜单容器元素的相关样式。
宽度是200px，高度是auto，也就是可以根据内容元素的变化。
使用margin设置其水平居中。
.nav li span {
width: 185px;
height: 45px;
line-height: 45px;
color: #333;
display: block;
padding-left: 15px;
cursor: pointer;
border-bottom: 1px solid #fff;
}
这个span元素用来防止主导航的文本内容。
通过display: block将其设置为块级元素，这样就可以设置其尺寸了。
.side_nav {
display: none;
}
设置二级导航在默认状态下为隐藏。
.side_nav li {
height:45px;
width:185px;
line-height:45px;
background:#ccc;
color:#333;
display:block;
padding-left: 15px;
border-bottom: 1px solid #fff;
}
设置里元素的相关样式，也就是二级导航每一个栏目的样式。
$(document).ready(function(){
//code
})
当文档结构完全加载完毕再去执行函数中的代码。
$(".nav li span").click(function(){
//code
})
为主导航注册click事件处理函数。
if ($(this).siblings('ul').css('display')=='none') {
$(this).siblings('ul').slideDown(100);
}else{
$(this).siblings('ul').slideUp(100);
}
判断当前点击的主导航span元素的兄弟ul元素是否是隐藏。
如果隐藏就下拉展开，否则就收缩。
二.相关阅读:
（1）.click可以参阅jQuery click事件一章节。
（2）.siblings可以参阅jQuery siblings()一章节。
（3）.css()可以参阅jQuery css()一章节。
（4）.slideDown()可以参阅jQuery slideDown()一章节。
（5）.slideUp()可以参阅jQuery slideUp()一章节。
jQuery点击展开折叠手风琴导航菜单详解，这样的场景在实际项目中还是用的比较多的，关于jQuery点击展开折叠手风琴导航菜单详解就介绍到这了。
jQuery点击展开折叠手风琴导航菜单详解属于前端实例代码，有关更多实例代码大家可以查看。