jquery - 多级 Accordion 菜单改进？

Question

我希望构建一个多级 Accordion 菜单。 到目前为止，我已经构建了这个菜单 ( http://codepen.io/anon/pen/ogdovx )，但我是 jquery 的新手，并且已经达到了我的知识极限。

如何改进？ 我只需要它来下拉具有子 UL 的元素，并在打开时折叠 sibling / child 。

如果能帮助我改进代码，我们将不胜感激。 干杯!

来自codepen的代码:

$(document).ready(function() {

   $(".main > li > a").click(function() {
      $('.main ul').slideUp();
      if (!$(this).next().is(":visible")) {
        $(this).next().slideDown();
      }
   })

   $(".main > li > ul > li > a").click(function() {
      $('.main ul ul').slideUp();
      if (!$(this).next().is(":visible")) {
        $(this).next().slideDown();
      }
   })

   $(".main ul ul li > a").click(function() {
      $('.main ul ul ul').slideUp();
      if (!$(this).next().is(":visible")) {
        $(this).next().slideDown();
      }
   })
  
});

ul.children {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main">
  <li class="page_has_children">
    <a href="#">Link</a>
    <ul class="children">
      <li class="page_has_children">
        <a href="#">Sub Link</a>
        <ul class="children">
          <li>
            <a href="#">Sub Sub Link</a>
            <ul class="children">
              <li><a href="#">Child Link</a>
              </li>
              <li><a href="#">Child Link</a>
              </li>
              <li><a href="#">Child Link</a>
              </li>
            </ul>
          </li>
          <li><a href="#">Sub Link</a>
          </li>
          <li><a href="#">Sub Link</a>
          </li>
          <li><a href="#">Sub Link</a>
          </li>
        </ul>
      </li>
      <li class="page_has_children">
        <a href="#">Link</a>
        <ul class="children">
          <li><a href="#">Sub Link</a>
          </li>
          <li><a href="#">Sub Link</a>
          </li>
          <li><a href="#">Sub Link</a>
          </li>
          <li><a href="#">Sub Link</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Sub Link</a>
      </li>
      <li><a href="#">Sub Link</a>
      </li>
    </ul>
  </li>
  <li class="page_has_children">
    <a href="#">Link</a>
    <ul class="children">
      <li><a href="#">Sub Link</a>
      </li>
      <li><a href="#">Sub Link</a>
      </li>
      <li><a href="#">Sub Link</a>
      </li>
      <li><a href="#">Sub Link</a>
      </li>
    </ul>
  </li>
  <li class="page_has_children">
    <a href="#">Link</a>
    <ul class="children">
      <li><a href="#">Sub Link</a>
      </li>
      <li><a href="#">Sub Link</a>
      </li>
      <li><a href="#">Sub Link</a>
      </li>
      <li><a href="#">Sub Link</a>
      </li>
    </ul>
  </li>
  <li class="page_has_children">
    <a href="#">Link</a>
    <ul class="children">
      <li><a href="#">Sub Link</a>
      </li>
      <li><a href="#">Sub Link</a>
      </li>
      <li><a href="#">Sub Link</a>
      </li>
      <li><a href="#">Sub Link</a>
      </li>
    </ul>
  </li>
</ul>

Answer 1

改进这一点的最明显方法是创建一些句柄，这样您就不必重复太多代码。最简单的方法是在任何父链接上放置一个类。通过这样做，您只需要调用来添加事件处理程序。

$(".parent-link").click(function() {
  var children = $(this).next(); //shorthand for the next ul
  var parents = $(this).parents(".children"); //any uls above me

  //close all other uls not above me in the tree
  $('.children').not(parents).slideUp();
  
  //open this if its closed
  children.filter(":hidden").slideDown();
})

ul.children {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main">
  <li class=".parent-link">
    <a class="parent-link" href="#">Link</a>
    <ul class="children">
      <li class="page_has_children">
        <a class="parent-link" href="#">Sub Link</a>
        <ul class="children">
          <li>
            <a class="parent-link" href="#">Sub Sub Link</a>
            <ul class="children">
              <li><a href="#">Child Link</a>
              </li>
              <li><a href="#">Child Link</a>
              </li>
              <li><a href="#">Child Link</a>
              </li>
            </ul>
          </li>
          <li><a href="#">Sub Link</a>
          </li>
          <li><a href="#">Sub Link</a>
          </li>
          <li><a href="#">Sub Link</a>
          </li>
        </ul>
      </li>
      <li class="page_has_children">
        <a class="parent-link" href="#">Link</a>
        <ul class="children">
          <li><a href="#">Sub Link</a>
          </li>
          <li><a href="#">Sub Link</a>
          </li>
          <li><a href="#">Sub Link</a>
          </li>
          <li><a href="#">Sub Link</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Sub Link</a>
      </li>
      <li><a href="#">Sub Link</a>
      </li>
    </ul>
  </li>
  <li class="page_has_children">
    <a class="parent-link" href="#">Link</a>
    <ul class="children">
      <li><a href="#">Sub Link</a>
      </li>
      <li><a href="#">Sub Link</a>
      </li>
      <li><a href="#">Sub Link</a>
      </li>
      <li><a href="#">Sub Link</a>
      </li>
    </ul>
  </li>
  <li class="page_has_children">
    <a class="parent-link" href="#">Link</a>
    <ul class="children">
      <li><a href="#">Sub Link</a>
      </li>
      <li><a href="#">Sub Link</a>
      </li>
      <li><a href="#">Sub Link</a>
      </li>
      <li><a href="#">Sub Link</a>
      </li>
    </ul>
  </li>
  <li class="page_has_children">
    <a class="parent-link" href="#">Link</a>
    <ul class="children">
      <li><a href="#">Sub Link</a>
      </li>
      <li><a href="#">Sub Link</a>
      </li>
      <li><a href="#">Sub Link</a>
      </li>
      <li><a href="#">Sub Link</a>
      </li>
    </ul>
  </li>
</ul>