在jQuery菜单中关闭以前的项目

Question

第一次在这里发帖，但我在研究时总是先来这里。无论如何，我已到处搜索，找不到解决我的问题的可靠解决方案。这是问题所在，我创建了一个带有jQuery 1.9.1和slideToggle函数的垂直滑动菜单。我已经把一个例子中的jsfiddle http://jsfiddle.net/JWaXM/1/

<li class="topnav"><a href="#">ITEMS LIST 1</a> 
<ul> 
    <li class="subnav">ITEM 1 
     <ul> 
      <li>List subitem 1</li> 
      <li>List subitem 2</li> 
     </ul> 
    </li> 
    <li class="subnav">ITEM 2 
     <ul> 
      <li>List subitem 1</li> 
      <li>List subitem 2</li> 
     </ul> 
    </li> 
</ul> 
</li> 

<li class="topnav"><a href="#">ITEMS LIST 2</a> 
<ul> 
    <li class="subnav">ITEM 1 
     <ul> 
      <li>List subitem 1</li> 
      <li>List subitem 2</li> 
     </ul> 
    </li> 
    <li class="subnav">ITEM 2 
     <ul> 
      <li>List subitem 1</li> 
      <li>List subitem 2</li> 
     </ul> 
    </li> 
</ul> 
</li> 

<script type="text/javascript"> 
$(document).ready(function(){ 
$(".topnav, .subnav").click(function(event){ 
event.stopPropagation(); 
$(this).children("ul").slideToggle(); 
}); 
}); 
</script> 

菜单的伟大工程，但我需要弄清楚如何关闭之前的子菜单，当我打开另一个。此外，我需要一种方法来区分父母和孩子，所以它会知道要么关闭topnav或subnav。我是整个jQuery的新手，但我正在慢慢学习。感谢您的任何帮助，我很感激。

Answer 1

你可以向上滑动全部点击元素的兄弟姐妹的孩子：

$(this).siblings().children('ul').slideUp(); 

这样，你不需要知道点击的元素是topnav或subnav元素，并且它将支持尽可能多的嵌套<ul>的必要

Demo

Answer 2

尝试

$(document).ready(function(){ 
    $(".topnav, .subnav").click(function(event){ 
     event.stopPropagation(); 
     $(this).closest('ul').find('.active').stop().slideToggle().removeClass('active'); 
     $(this).children("ul").slideToggle().addClass('active'); 
    }); 
}); 

演示：Fiddle