防止子元素与Twitter Bootstrap崩溃

问题描述

我有以下列表：

• 根
  
  
  
  • Child1
  
  
  • Child2
  
  

  根目录应该是可折叠的，但是不是孩子。使用以下代码，如果我单击其中之一，它们都会崩溃。我该如何防止儿童倒塌？

  The root should be collapsible but not the children. With the following code both will collapse if I click on one of them. How can I accomplish to prevent children from being collapsed?

  <li data-toggle="collapse" data-target="#root"><a href="#">Root</a>
      <ul class="nav nav-list collapse" id="root">
          <li><a href="some_url">Child1</a></li>
          <li><a href="some_url">Child2</a></li>
      </ul>
  </li>
  

  编辑：描述我想要的更好的方法。

  Better approach to describe what I want.

  
  
  1. 根从开始折叠。如果我单击root，它应该显示子项（与上面的代码一起工作），如果再次单击root，它应该隐藏子项（也可以工作）
  
  
  2. 一旦显示了子项，我单击一个儿童。单击将触发折叠，并再次隐藏子级。 （这就是我要防止的事情）
  
  

  jsfiddle：

  jsfiddle: http://jsfiddle.net/MgcDU/4537/

  推荐答案

  将数据切换和数据目标属性移动到 a 元素，例如

  Move the data-toggle and data-target attributes to the a element, like

  <li><a href="#" data-toggle="collapse" data-target="#root">Root</a>
      <ul class="nav nav-list collapse" id="root">
          <li><a href="#">Child1</a></li>
          <li><a href="#">Child2</a></li>
      </ul>
  </li>
  

  将它们放在最高的 li 元素中该元素及其所有子元素都会捕获click事件并触发合拢。将属性放到子元素中会将单击事件的处理范围限制为仅该元素（及其子元素）。

  Having them in the topmost li element makes that element and all its children catch the click events and trigger the collapse. Putting the attributes to a child element limits the scope of the click events handling to just that element (and its children.)

  这篇关于防止子元素与Twitter Bootstrap崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！