Bootstrap 3 - 可折叠列表不能正常折叠

Question

我使用Bootstrap 3来制作垂直可折叠导航菜单。文档看起来非常简单。试着用data- *标签来做。吻。

当我展开一个新的部分时，我似乎无法让其他部分崩溃。即在每个单独的项目上展开和折叠作品。但是，如果您设置了数据父级，则非活动部分应该会自动关闭。

有人可以指出我哪里出错了吗？

jsfiddle

<li><a data-toggle="collapse" data-parent="#menu" href="#one">One</a> 
     <ul id="one" class="collapse"> 
      <li><a href="#">Point One</a></li> 
      <li><a href="#">Point Two</a></li> 
      <li><a href="#">Point Three</a></li> 
     </ul> 
    </li> 

    <li><a data-toggle="collapse" data-parent="#menu" href="#two">Two</a> 
     <ul id="two" class="collapse"> 
      <li><a href="#">Point One</a></li> 
      <li><a href="#">Point Two</a></li> 
      <li><a href="#">Point Three</a></li> 
     </ul> 
    </li> 

</ul> 

Answer 1

啊...面板类人的伎俩......的JavaScript必须使用他们作为选择器。

从bootstrap.js：this.$parent.find('> .panel > .in')

通过添加面板类父列表元素，倒塌现在可以正常工作。也许Twitter可以让这个功能变得更加通用？但它现在正在工作。但愿这不是一个黑客...

感谢您的线索......

<ul id="menu"> 

    <li class="panel"> 
     <a data-toggle="collapse" data-parent="#menu" href="#one">One</a> 
     <ul id="one" class="collapse"> 
      <li><a href="#">Point One</a></li> 
      <li><a href="#">Point Two</a></li> 
      <li><a href="#">Point Three</a></li> 
     </ul> 
    </li> 

    <li class="panel"> 
     <a data-toggle="collapse" data-parent="#menu" href="#two">Two</a> 
     <ul id="two" class="collapse"> 
      <li><a href="#">Point One</a></li> 
      <li><a href="#">Point Two</a></li> 
      <li><a href="#">Point Three</a></li> 
     </ul> 
    </li> 

    <li class="panel"> 
     <a data-toggle="collapse" data-parent="#menu" href="#three">Three</a> 
     <ul id="three" class="collapse"> 
      <li><a href="#">Point One</a></li> 
      <li><a href="#">Point Two</a></li> 
      <li><a href="#">Point Three</a></li> 
     </ul> 
    </li> 

</ul> 

Answer 2

的原因是您正在使用ul和li。使用文档

Working Demo

HTML

<div class="panel-group" id="accordion"> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
      Collapsible Group Item #1 
     </a> 
     </h4> 
    </div> 
    <div id="collapseOne" class="panel-collapse collapse in"> 
     <div class="panel-body"> 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
     </div> 
    </div> 
    </div> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 
      Collapsible Group Item #2 
     </a> 
     </h4> 
    </div> 
    <div id="collapseTwo" class="panel-collapse collapse"> 
     <div class="panel-body"> 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
     </div> 
    </div> 
    </div> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> 
      Collapsible Group Item #3 
     </a> 
     </h4> 
    </div> 
    <div id="collapseThree" class="panel-collapse collapse"> 
     <div class="panel-body"> 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
     </div> 
    </div> 
    </div> 
</div> 

Answer 3

的可折叠的子元素，即，li元素应该具有块元素类“面板”内被包裹在所描述的。简单地将数据父项属性设置为#menu将不起作用。所以你需要重构你的HTML。

你可以尝试这样的事情（不样式固定，使它看起来像之前） -

<div id="menu"> 
    <div class="panel"> 
    <a data-toggle="collapse" data-parent="#menu" href="#one">One</a> 
     <ul id="one" class="collapse"> 
      <li><a href="#">Point One</a></li> 
      <li><a href="#">Point Two</a></li> 
      <li><a href="#">Point Three</a></li> 
     </ul> 
    <a data-toggle="collapse" data-parent="#menu" href="#two">Two</a> 
     <ul id="two" class="collapse"> 
      <li><a href="#">Point One</a></li> 
      <li><a href="#">Point Two</a></li> 
      <li><a href="#">Point Three</a></li> 
     </ul> 
    </div> 
</div>