jQuery 鼠标点击展开/显示和收缩/隐藏导航菜单（子菜单）

《jQuery 鼠标点击展开/显示和收缩/隐藏导航菜单（子菜单）》正文开始，本次阅读大概1分钟。

今天一个zblog模板用户提出再模板中需要加入一个菜单展开/显示、收缩/隐藏功能，点击可展开，再次点击就可以关闭的导航菜单，如下图所示：

这样的特效必须使用到JS才行，使用jQuery最佳！

所以上方这段特效所需要的代码如下：

!doctypehtml
html
head
metacharset=utf-8
metaname=authorcontent=
http://www.softwhy.com/
/
titleJS/JQuery鼠标点击可展示/显示、隐藏/关闭导航菜单的子菜单/title
styletype=text/css
*{
padding:0px;
margin:0px;
font-family:microsoftyahei;
}
.container{
margin:20px;
border:1pxsolid#000;
width:240px;
overflow:hidden;
}
li{
list-style:none;
}
.containerli{
background:#63f7ff;
width:240px;
color:#000;
font-size:18px;
cursor:pointer;
line-height:2em;
}
.containerlispan{
width:0;
height:0;
border-top:5pxsolidtransparent;
border-left:10pxsolid#000;
border-bottom:5pxsolidtransparent;
display:inline-block;
margin:010px;
}
.containerli.down{
width:0;
height:0;
border-left:5pxsolidtransparent;
border-right:5pxsolidtransparent;
border-top:10pxsolid#000;
}
.smallli{
background:#fff;
color:#000;
border:1pxsolid#ddd;
font-size:16px;
padding-left:30px;
}
.smallli:hover{
background:#63f7ff;
}
.hide{
display:none;
}
.containerul.color{
background:#f7f794;
}
/style
scriptsrc=
http://libs.baidu.com/jquery/1.9.0/jquery.js/script

scripttype=text/javascript
$(document).ready(function(){
$(.containerulli).click(function(){
$(this).toggleClass(color);
$(this).find(span).toggleClass(down);
$(this).next().toggleClass(hide);
})
});
/script
/head
body
divclass=container
ul
lispan/span前端教程/li
ulclass=smallhide
li蚂蚁部落一/li
li蚂蚁部落二/li
li蚂蚁部落三/li
/ul
lispan/span资源专区/li
ulclass=smallhide
li特效下载/li
li移动端特效/li
li蚂蚁部落/li
/ul
lispan/span黑名单/li
ulclass=smallhide
li百度/li
li网易/li
li腾讯/li
/ul
/ul
/div
/body
/html

其实方法还是非常简单的，主要使用了toggleClass，再点击后可切换类名，而类必须有显示和隐藏的属性！