您的位置：首页 > 其它

jq点击显示隐藏二级菜单的几种方法

2018-03-20 16:43 274 查看
转自：http://blog.csdn.net/supercoooooder/article/details/50755427<!DOCTYPE html>
<html>
<head>
<title>Dropdown</title>
<meta charset="utf-8" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js
"></script>
<style type="text/css">
.level2{display: none;}
</style>
</head>
<body>
<div class="content">
<ul>
<li class="level1">
<a href="#" class="current">喇叭裤</a>
<ul class="level2"> <!--初始化一个二级菜单显示-->
<li>短裤1</li>
<li>短裤</li>
<li>短裤</li>
</ul>
</li>
<li class="level1">
<a href="#" >喇叭裤</a>
<ul class="level2">
<li>短裤1</li>
<li>短裤</li>
<li>短裤</li>
</ul>
</li>
<li class="level1">
<a href="#" >喇叭裤</a>
<ul class="level2">
<li>短裤1</li>
<li>短裤2</li>
<li>短裤3</li>
</ul>
</li>
</ul>
</div>
</body>
<script>
//第一种方法：显示一个二级菜单时其他的隐藏，再次点击已显示的二级菜单时，该二级菜单隐藏

// $(".level1 > a").click(function(){
// var iclass = $(this).attr("class");
// if (iclass=="current"){
// $(this).next().hide();
// }else {
// $(this).addClass("current").next().show()
// .parent().siblings()
// .children("a").removeClass("current").next().hide();
// return false;
// }
// });

//第二种方法：可同时显示多个二级菜单，点击显示/隐藏

$(function(){
$(".level1 > a").click(function(){
$(this).next().toggle(800,function(){
//TODO
});
});
});

// $(function(){
// $(".level1 > a").click(function(){
// $(this).next().slideToggle(800,function(){ //滑动
// //TODO
// });
// });
// });
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航