jQuery的嵌套手风琴，只显示一个级别

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 + 

当我点击+列表上变成

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

您可以将类添加到列表中时，它有一个子表，并切换列表，切换另一个班级的父母，因此可以将'+'更改为' - '。

你可以尽可能多的级别，并且代码将工作， 我已经添加一个跨度列表有孩子，但所以只能触发点击文本，如果你触发单击李列表并打开子列表然后再次关闭。

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

$(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>