モバイルデバイスのナビ用にシンプルなアコーディオンを作成しています。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>
画面サイズがモバイルに達すると、次のような画面を実現するために (メディア クエリを使用して) まったく新しい 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 つだけです。これは、アコーディオンの一般的な動作です。
ユーザーが親レベルのリスト項目のいずれかをクリックしたときに、開いているすべてのパネルを下にスライドさせるjqueryを手伝ってもらえますか? ありがとう!