私は、すべての最初のレベルのページがレイアウトされている一種のアコーディオン タイプのメニューを実行しようとしています。親ページをクリックすると、slideDown になり、さらに子要素を持つページをクリックすると、再び下にスライドします.
私は少し立ち往生しています、これが私が以下に持っているものです。まず、slideDown アクションが LI にアタッチされているため、子要素も持つ子要素をクリックしようとすると、上にスライドして戻ります。クリックするアンカーを選択してからスライドダウンする方法はありますか?
私の説明で少し混乱して申し訳ありませんが、これまでの HTML と JS が説明に役立つことを願っています。クリックして展開するだけの簡単なメニュー。
更新: http://jsfiddle.net/TDPb4/1/
ありがとう、R
HTML:
<ul class="sub-navigation">
<li class="page_item page-item-29 current_page_item parent"><a href="http://richgc.com/dust/bmk/home/clinicallaboratory/">Clinical/Laboratory</a>
<ul class="children">
<li class="page_item page-item-40 parent"><a href="http://richgc.com/dust/bmk/home/clinicallaboratory/histopathology/">Histopathology</a>
<ul class="children">
<li class="page_item page-item-99"><a href="http://richgc.com/dust/bmk/home/clinicallaboratory/histopathology/test-page/">Test page</a></li>
</ul>
</li>
<li class="page_item page-item-42"><a href="http://richgc.com/dust/bmk/home/clinicallaboratory/bacteriology/">Bacteriology</a></li>
<li class="page_item page-item-46"><a href="http://richgc.com/dust/bmk/home/clinicallaboratory/packaging-guidelines/">Packaging Guidelines</a></li>
<li class="page_item page-item-44"><a href="http://richgc.com/dust/bmk/home/clinicallaboratory/water-quality-analysis/">Water Quality Analysis</a></li>
</ul>
</li>
<li class="page_item page-item-33 parent"><a href="http://richgc.com/dust/bmk/home/education-and-training/">Education and Training</a>
<ul class="children">
<li class="page_item page-item-104"><a href="http://richgc.com/dust/bmk/home/education-and-training/test-page/">Test page</a></li>
</ul>
</li>
<li class="page_item page-item-31"><a href="http://richgc.com/dust/bmk/home/environmental-services/">Environmental Services</a></li>
<li class="page_item page-item-35"><a href="http://richgc.com/dust/bmk/home/products/">Products</a></li>
<li class="page_item page-item-27"><a href="http://richgc.com/dust/bmk/home/veterinary/">Veterinary</a></li>
</ul>
jQuery:
$(".sub-navigation li.parent a").click(function(e) {
$(this).parent(".children").slideToggle('fast');
});