<!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>
转自：http://blog.csdn.net/supercoooooder/article/details/50755427
第二种
$(function () { $(".add-anva").click(function(){ $(this).next(".menu-nav").slideToggle(500).siblings(".menu-nav").slideUp(500); }); })