0

我正在尝试做一种手风琴式菜单，所有第一级页面都在其中布局，如果单击父页面，它将向下滑动，然后如果单击具有更多子元素的页面，它将再次向下滑动.

我有点卡住了，这是我下面的内容。首先，因为 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 回答