0

私は、すべての最初のレベルのページがレイアウトされている一種のアコーディオン タイプのメニューを実行しようとしています。親ページをクリックすると、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');
});
4

1 に答える 1

1

.closest() 代わりに試してください.parent()

$(".sub-navigation li.parent a").click(function(e) {
   e.preventdefault()
   $(this).closest(".children").slideToggle('fast');
});

更新しました

$(".sub-navigation li.parent a").click(function(e) {
   e.preventDefault()
   $(this).closest('.parent').find("> .children").slideToggle('fast');
});​

更新されたフィドル

于 2012-11-07T17:43:03.503 に答える