Bootstrap手风琴/可折叠不与ul/li导航

Question

我使用最新的bootstrap，手风琴根本不工作..我的意思是，当我打开测试1与嵌套的'ul'，它切换，但然后当我点击在测试2与另一个嵌套'UL'，它也切换，但没有关闭测试1 ...

任何人都可以帮助我吗？它看起来不会与'ul'和'li'（没有面板类）一起工作。

在此先感谢。

p.s.这里是我的手风琴尝试的完整代码..除了自动关闭之前打开的所有东西都在工作。

http://jsbin.com/OKOjUlu/1/edit?html,output

<div class="row"> 
    <div class="page-header"> 
     <h3>Proizvodi</h3> 

    </div> 
    <div class="col-md-3"> 
     <ul class="nav nav-stacked" id="accordion1"> 
      <li> <a data-toggle="collapse" data-parent="#accordion1" href="#firstLink">Test12</a> 

       <ul id="firstLink" class="collapse"> 
        <li>SubTest1</li> 
        <li>SubTest1</li> 
        <li>SubTest1</li> 
       </ul> 
      </li> 
      <li> <a data-toggle="collapse" data-parent="#accordion1" href="#secondLink">Test2</a> 

       <ul id="secondLink" class="collapse"> 
        <li>SubTest2</li> 
        <li>SubTest2</li> 
        <li>SubTest2</li> 
        <li>SubTest2</li> 
       </ul> 
      </li> 
      <li><a href="#">Test1</a> 
      </li> 
      <li><a href="#">Test1</a> 
      </li> 
     </ul> 
    </div> 
    <div class="col-md-9"></div> 
</div> 

Answer 1

试试这个：

脚本：

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<script type="text/javascript" src="../js/bootstrap.min.js"></script> 

HTML：

<div class="bs-example"> 
<div id="myAccordion" class="accordion"> 
<div class="accordion-group"> 
     <div class="accordion-heading"> 
      <a href="#collapseOne" data-parent="#myAccordion" data-toggle="collapse" class="accordion-toggle">Test12</a> 
     </div> 
     <div class="accordion-body collapse" id="collapseOne"> 
      <div class="accordion-inner"> 
       <ul> 
        <li>SubTest1</li> 
        <li>SubTest1</li> 
       <li>SubTest1</li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 
</div> 

请点击这里：Demo

Answer 2

Bootstrap主要是增加/删除css类及其规则的繁荣。所以结构需要相同才能发挥与div相同的效果。你在丢失触发器及其相应菜单的页面里，错过了<li class="panel">。而在你的情况下，你错过了他们。

BS代码：

//In the below line this is supposed to fetch the active elements 
//but in your case it did not match anything hence it failed to fetch active elements to make it inactive. 
var actives = this.$parent && this.$parent.find('> .panel > .in') 

    if (actives && actives.length) { 
     var hasData = actives.data('bs.collapse') 
     if (hasData && hasData.transitioning) return 
     actives.collapse('hide') 
     hasData || actives.data('bs.collapse', null) 
    } 

所以尝试：

  <ul class="nav nav-stacked" id="accordion1"> 
      <li class="panel"> 
       <a data-toggle="collapse" data-parent="#accordion1" href="#firstLink">Test12</a> 
       <ul id="firstLink" class="collapse panel-collapse in"> 
        <li>SubTest1</li> 
        <li>SubTest1</li> 
        <li>SubTest1</li> 
       </ul> 
      </li> 
      <li class="panel"> 
       <a data-toggle="collapse" data-parent="#accordion1" href="#secondLink">Test2</a> 
       <ul id="secondLink" class="collapse panel-collapse"> 
        <li>SubTest2</li> 
        <li>SubTest2</li> 
        <li>SubTest2</li> 
        <li>SubTest2</li> 
       </ul> 
      </li> 
     </ul> 

而且因为这是专为div使用你将不得不专门重写一些规则li，像下面的一个。

#accordion1 li.panel{ 
    margin-bottom: 0px; 
} 

Demo