#### **判断菜单的子菜单的状态，点击当前子菜单的展开，其他的收缩回去** 基本的HTML结构 ~~~ <div id="nav"> <ul> <li> <div class="nav-item"> <span>出品</span> </div> <div class="menu"> <ul> <li><a class="will-menuItem" href="template/store/ListKursaal.html">出品1</a></li> <li><a class="will-menuItem" href="template/store/ListKursaal.html">出品2</a></li> <li><a class="will-menuItem" href="template/store/ListKursaal.html">出品3</a></li> <li><a class="will-menuItem" href="template/store/ListKursaal.html">出品4</a></li> </ul> </div> </li> <li> <div class="nav-item"> <span>管理</span> </div> <div class="menu"> <ul> <li><a class="will-menuItem" href="template/store/ListKursaal.html">管理</a></li> </ul> </div> </li> </ul> </div> ~~~ js ~~~ $("#nav .nav-item").click(function(){ var menu = $(this).next(".menu"); if(menu.is(":hidden")){ menu.slideDown(300).parents("li").siblings("li").find("div.menu").slideUp(300); } else { menu.slideUp(300); } }); ~~~