您的位置：首页 > Web前端 > JQuery

用JQuery写一个三级可收缩菜单

2016-12-06 00:12 337 查看

用JQ写的一个三级收缩菜单

html代码： <body>
<div id="menu">
<ul class="root">
<li><a href="#">顶级菜单1</a></li>
<li><a href="#" class="inactive1">顶级菜单2</a>
<ul class="second">
<li><a href="#" class="inactive1">二级菜单</a>
<ul class="third">
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
</ul>
</li>
<li><a href="#" class="inactive1">二级菜单</a>
<ul class="third">
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
</ul>
</li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li><a href="#" class="inactive1">顶级菜单3</a>
<ul class="second">
<li><a href="#" class="inactive1">二级菜单</a>
<ul class="third">
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
</ul>
</li>
<li><a href="#" class="inactive1">二级菜单</a>
<ul class="third">
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
</ul>
</li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li><a href="#">顶级菜单4</a></li>
</ul>
</div>
</body>

JQ代码：

$(document).ready(function(){
$(".inactive1").click(function(){
if($(this).siblings('ul').css('display')=='none')
{
$(this).siblings('ul').slideDown(100);
//下面的if是为了控制同级菜单中都有子菜单只能打开一个
if ($(this).parents('li').siblings('li').children('ul').css('display') == 'block')

{
$(this).parents('li').siblings('li').children('ul').slideUp(100);

}
}
else
{	//控制自身菜单下子菜单隐藏
$(this).siblings('ul').slideUp(100);
//控制自身菜单下子菜单隐藏
$(this).siblings('ul').children('li').children('ul').slideUp(100);
}

});
});
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JQ 三级菜单

相关文章推荐

新的分享

章节导航