Question

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

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

alt text http://img36.imageshack.us/img36/7897/multilevelaccordian.png

由于

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>

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

2 个答案: