如何使用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>