Question

我正在尝试做一种手风琴类型菜单，其中所有第一级页面都已布局，如果单击父页面，它将会滑动，然后如果单击包含其他子元素的页面，则再次滑下来。

我有点卡住了，这就是我下面的内容。首先，因为slideDown操作附加到LI，所以当您尝试单击具有子项的子元素时，它会向上滑动。有没有办法选择要点击的锚点然后滑下来？

很抱歉对我的解释有点困惑，但希望到目前为止HTML和JS有助于解释。一个简单的点击和展开菜单。

谢谢， [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');
});

Answer 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');
});

<强> Updated Fiddle

与多个父母/子女一起向下滑动菜单

1 个答案: