以下のようなリスト要素を使用したシンプルな垂直メニューがあります
<ul id="leftNav">
<li id="home"><a href="/index.html">Home</a>
</li>
<li id="apples"><a href="/category/apples.html">Apples</a>
<ul class="subMenu">
<li><a href="/category/red-apples.html">Red Apples</a>
</li>
<li><a href="/category/green-apples.html">Green Apples</a>
</li>
<li><a href="/category/golden-apples.html">Golden Apples</a>
</li>
</ul>
</li>
<li id="grapes"><a href="/category/grapes.html">Grapes</a>
<ul class="subMenu">
<li><a href="/category/red-grapes.html">Red Grapes</a>
</li>
<li><a href="/category/green-grapes.html">Green Grapes</a>
</li>
<li><a href="/category/black-grapes.html">Black Grapes</a>
</li>
</ul>
</li>
<li id="dry-fruits"><a href="/category/dry-fruits.html">Dry Fruits</a>
<ul class="subMenu">
<li id="subParent1"><a href="#">Fruits That Are Dried</a>
<ul class="subMenu1">
<li><a href="/category/figs.html">Figs</a>
</li>
<li><a href="/category/dates.html">Dates</a>
</li>
<li><a href="/category/pineapples.html">Pine Apples</a>
</li>
</ul>
</li>
<li id="subParent2"><a href="#">Nuts and Seeds</a>
<ul class="subMenu1">
<li><a href="/category/chestnuts.html">Chestnuts</a>
</li>
<li><a href="/category/almonds.html">Almonds</a>
</li>
<li><a href="/category/walnuts.html">Walnuts</a>
</li>
</ul>
</li>
<li id="subParent3"><a href="/category/bananas.html">Bananas</a>
</li>
</ul>
</li>
<li id="sale" class="expanded"><a href="/category/sale.html">Sale</a>
</ul>
私がやろうとしているのは、リンゴまたはそのサブ項目がクリックされたときです。リストのセクションを展開したままにしようとしているので、ブドウまたはそのサブ項目をクリックすると、ブドウのセクションを除いて他のすべてを閉じる必要があります。
以下のようなコードを使用してみましたが、Apples と Grapes はそれぞれのページをレンダリングするリンクであるため、以下のコードは機能しません。
$(document).ready(function() {
$("#apples .subMenu").css("display", "block");
});
ヘルプ、例、またはアドバイスをいただければ幸いです。