如何使用jQuery创建多级jquery手风琴菜单？

Question

我想用jQuery创建多级手风琴导航，我尝试使用这个脚本，但它不允许多级。 请查看图片我在寻找什么，

http://www.i-marco.nl/weblog/jquery-accordion-menu/#

谢谢

Answer 1

首先标记您的项目，如此。 您需要使用“accordion”类标记任何子菜单。

<ul class="accordion">
  <li><a class="head" href="#">Item 1</a>
      <ul class="accordion">
      <li><a href="#">Item 1 - 1 </a></li>
      <li><a href="#">Item 1 - 2</a></li>
      <li>
        <a href="#">Item 1 - 3</a>
        <ul class="accordion">
          <li><a href="#">Item 1 - 3 - 1</a></li>
          <li><a href="#">Item 1 - 3 - 1 </a></li>
          <li><a href="#">Item 1 - 3 - 1</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li>
    <a href="#">Item 3</a>
    <ul class="accordion">
      <li><a href="#">Item 3 - 1 </a></li>
      <li><a href="#">Item 3 - 2</a></li>
      <li><a href="#">Item 3 - 2</a></li>
    </ul>
  </li>
</ul>

之后只需使用jQuery UI的手风琴插件（不要忘记包含jQuery核心文件和jQuery UI文件。

<script type="text/javascript">
    $(function() {
        $(".accordion").accordion();
    });
</script>

http://jqueryui.com/demos/accordion/

使用CSS根据需要设置样式。 当然，结构和类名可以更改为首选。 这只是最简单的解决方案

Answer 2

对于使用Jquery的嵌套级别手风琴来说，这也是一个不错的选择：

 $('.toggle').click(function(e) { e.preventDefault(); var $this = $(this); if ($this.next().hasClass('show')) { $this.next().removeClass('show'); $this.next().slideUp(350); } else { $this.parent().parent().find('li .inner').removeClass('show'); $this.parent().parent().find('li .inner').slideUp(350); $this.next().toggleClass('show'); $this.next().slideToggle(350); } }); 

 * { box-sizing: border-box; font-family: 'Open Sans', sans-serif; font-weight: 300; } a { text-decoration: none; color: inherit; } p { font-size: 1.1em; margin: 1em 0; } ul { list-style: none; padding: 0; } ul .inner { padding-left: 1em; overflow: hidden; display: none; } ul .inner.show { /*display: block;*/ } ul li { margin: 0.5em 0; } ul li a.toggle { width: 100%; display: block; background: rgba(0, 0, 0, 0.78); color: #fefefe; padding: 0.75em; border-radius: 0.15em; transition: background 0.3s ease; } ul li a.toggle:hover { background: rgba(0, 0, 0, 0.9); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="accordion"> <li> <a class="toggle" href="javascript:void(0);">Item 1</a> <ul class="inner"> <li>Option 1</li> <li>Option 2</li> <li>Option 3</li> </ul> </li> <li> <a class="toggle" href="javascript:void(0);">Item 2</a> <ul class="inner"> <li>Option 1</li> <li>Option 2</li> <li>Option 3</li> </ul> </li> <li> <a class="toggle" href="javascript:void(0);">Item 3</a> <ul class="inner"> <li> <a href="#" class="toggle">Open Inner</a> <div class="inner"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus placerat fringilla. Duis a elit et dolor laoreet volutpat. Aliquam ultrices mauris id mattis imperdiet. Aenean cursus ultrices justo et varius. Suspendisse aliquam orci id dui dapibus blandit. In hac habitasse platea dictumst. Sed risus velit, pellentesque eu enim ac, ultricies pretium felis. </p> </div> </li> <li> <a href="#" class="toggle">Open Inner #2</a> <div class="inner"> <p> Children will automatically close upon closing its parent. </p> </div> </li> <li>Option 3</li> </ul> </li> <li> <a class="toggle" href="javascript:void(0);">Item 4</a> <ul class="inner"> <li> <a href="#" class="toggle">Technically any number of nested elements</a> <ul class="inner"> <li> <a href="#" class="toggle">Another nested element</a> <div class="inner"> <p> As long as the inner element has inner as one of its classes then it will be toggled. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus placerat fringilla. Duis a elit et dolor laoreet volutpat. Aliquam ultrices mauris id mattis imperdiet. Aenean cursus ultrices justo et varius. Suspendisse aliquam orci id dui dapibus blandit. In hac habitasse platea dictumst. Sed risus velit, pellentesque eu enim ac, ultricies pretium felis. </p> </div> </li> </ul> </li> <li>Option 2</li> <li>Option 3</li> </ul> </li> </ul>