Bootstrap 3 - 具有手风琴功能的列表组

时间:2014-07-17 08:56:12

标签: twitter-bootstrap-3 listgrid

 <div class="list-group" id="menu">
 <a href="#" class="list-group-item" data-toggle="collapse" data-target="#sm" data-parent="#menu">MESSAGES <span class="label label-info">5</span> <span class="glyphicon glyphicon-envelope pull-right"></span></a>
 <div id="sm" class="sublinks collapse">
  <a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> inbox</a>
  <a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> sent</a>
 </div>
 <a href="#" class="list-group-item" data-toggle="collapse" data-target="#sl" data-parent="#menu">TASKS <span class="glyphicon glyphicon-tag pull-right"></span></a>
 <div id="sl" class="sublinks collapse">
  <a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> saved tasks</a>
  <a class="list-group-item small"><span class="glyphicon glyphicon-chevron-right"></span> add new task</a>
 </div>
 <a href="#" class="list-group-item">ANOTHER LINK ...<span class="glyphicon glyphicon-stats pull-right"></span></a>
</div>

尽管<a>获得data-parent="#menu",但它们中没有一个会触发其他隐藏。如何更新此代码以隐藏一个子链接,因为其他子链接可见?

1 个答案:

答案 0 :(得分:2)

#menu必须是list-group的父级,而列表组必须拥有panel级。

http://www.bootply.com/tGF9MEGbLM