多级手风琴菜单改进？

时间：2015-02-25 00:59:26

标签： jquery css accordion

我希望建立一个多层次的手风琴菜单。 到目前为止，我已经构建了这个菜单（http://codepen.io/anon/pen/ogdovx），但我是jquery的新手，并且用它来达到我的知识极限。

如何改进？ 我需要它只下载具有子UL的项目并打开兄弟姐妹/孩子。

任何有关改进我的代码的帮助都将不胜感激。 干杯！

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>

1 个答案:

答案 0 :(得分：0)

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

＆＃13;
＆＃13; 
$(".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();
})
＆＃13; 
ul.children {
  display: none;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题