Question

假设我有以下结构：

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3
        <ul>
           <li>Item11</li>
           <li>Item12</li>
           <li>Item13</li>
        </ul>
    </li>

此树结构可以有多个级别。

最初，我想显示以下列表：

Item 1

Item 2

Item 3 +

当我点击+ list变为

时

Item 3 -

  Item 11

  Item 12

  Item 13

因此，父列表消失并显示子列表。如果我单击 - ，则所有内容都将返回到上一个列表。

是否有一些jquery插件可以执行此操作？

也许，手风琴中的一些选项？

提前致谢。

Answer 1

使用Dkouk他的版本来创造你需要的东西。

编辑1：隐藏其他菜单项编辑2：二级菜单

$(function () {
  
 
  $('ul li').each(function () {
    if ( $(this).find('ul').length > 0 ){
    $(this).addClass('child');
  }


  
  });
  
  $('ul li.child span').click(function() {
    $(this).parent().toggleClass('open').find('ul').first().slideToggle();
    
           $(this).parent().siblings().slideToggle();

    
});
  
  
});

ul { 
  list-style:none;
}
ul li.child span:after {
  content:"+";
}
ul li.child.open span:after {
  content:"-";
}
li ul { display:none; }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="main">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li>
    <span>Item 3</span>
    <ul>
      <li><a href="#">Item 1</a></li>
      <li>
        <span>Item 2</span>
        <ul>
          <li><a href="#">Item 1</a></li>
          <li><a href="#">Item 2</a></li>
          <li><a href="#">Item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Item 3</a></li>
    </ul>
  </li>
</ul>

Answer 2

当列表具有子列表时，您可以将列添加到列表中，并切换列表并切换列表父级的另一个类，以便将“+”更改为“ - ”。

您可以使用多个级别，代码可以使用，我在列表中添加了一个包含子项的span，但是只能在文本中触发单击，如果触发LI列表的单击并打开子列表，则会再次关闭。

您可以为内容设置样式。这是一个简单的例子：

 $(function () {
      
 
      $('ul li').each(function () {
        if ( $(this).find('ul').length > 0 ){
        $(this).addClass('child');
      }


      
      });
      
      $('ul li.child span').click(function() {
      $(this).toggleClass('open').parent().find('ul:first').slideToggle();
       $(this).parent().siblings().slideToggle();
    });
      
      
    });

ul { 
      list-style:none;
    }
    ul li.child span:after {
      content:"+";
    }
    ul li.child span.open:after {
      content:"-";
    }
    ul li ul { display:none; }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li>
        <span>Item 3</span>
        <ul>
          <li><a href="#">Item 1</a></li>
          <li><a href="#">Item 2</a></li>
          <li>
          <span>Item 3</span>
          <ul>
              <li><a href="#">Item 1</a></li>
              <li><a href="#">Item 2</a></li>
          </ul>
          </li>
        </ul>
      </li>
    </ul>

Jquery嵌套手风琴只显示一个级别

2 个答案: