新しいタブがクリックされたときにネストされたJqueryアコーディオンメニューを閉じるようにします。

Question

私はモバイルデバイス上でのナビゲーションのために簡単なアコーディオンを作ります。 HTMLは、このような構造を有する：

<nav> 
    <ul id="topMenu"> 
    <li> 
     <ul> 
      <li><h3><a href="#">Work</a></h3></li> 
      <li><a href="/work/">Brand ID</a></li> 
      <li><a href="/work/">Print</a></li> 
      <li><a href="/work/">Book & Editorial</a></li> 
      <li><a href="/work/">Web</a></li> 
      <li><a href="/work/">Packaging</a></li> 
      <li><a href="/work/">Exhibit</a></li> 
     </ul> 
    </li> 
    <li> 
     <ul> 
      <li><h3><a href="#">About</a></h3></li> 
      <li><a href="/about/">Our Story</a></li> 
      <li><a href="/about/">Methodology</a></li> 
      <li><a href="/about/">Team</a></li> 
      <li><a href="/about/">Studio</a></li> 
      <li><a href="/about/">Services</a></li> 
      <li><a href="/about/">Partners</a></li> 
     </ul> 
    </li> 
</ul> 
</nav> 

画面サイズは携帯に達したとき、私はちょうどこのような画面acheiveするCSS（メディアクエリを使用して）の全く新しいセットを持っている：

を

最初の子が表示され、残りは非表示になります。私はjqueryを使用して、アコーディオンスタイルの露呈を作成しています。

$("nav #topMenu li ul").toggle(function(){ 
    $(this).children("li").stop().slideDown(); 
}, function(){ 
    $(this).children("li:nth-child(1n+2)").stop().slideUp(); 
}); 

これはうまく動作します。しかし、私は1つのパネルが開いたときに残りの部分が閉じるような動作を探しています。だから、いつでも、アコーデオンでは1つのパネルしか開くことができません。これはアコーディオンの共通の動作です。

ユーザーが親レベルのリスト項目のいずれかをクリックしたときに開いているパネルをすべてスライドさせることができますか？ありがとう！ここで

Answer 1

は、それは私が簡単に最初slideup前にこれを追加することができ、それはへの最善の方法のように見えるしていません