Akordeon/składany nie działa z nawigacją ul/li

Question

Korzystam z najnowszego bootstrapu, a akordeon w ogóle nie działa. Mam na myśli, że gdy otworzę Test 1 z zagnieżdżonym "ul", to przełącza się, ale wtedy, gdy klikam w teście 2 z innym zagnieżdżonym "ul" przełącza się również, ale bez testu zamknięcia 1 ...

Ktoś może mi pomóc? Wygląda na to, że nie będzie działać z "ul" i "li" (bez klasy panelowej).

Z góry dziękuję.

p.s. Oto pełny kod mojej akordeonowej próby. Wszystko działa, z wyjątkiem automatycznego zamykania poprzednio otwartego.

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

Spróbuj tego:

scenariusz:

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

Sprawdź tutaj: Demo

Answer 2

Bootstrap najczęściej rozwija się przy dodawaniu/usuwaniu klas css i jego reguł. Tak więc struktura musi być taka sama, aby efekt zadziałał tak samo jak div. To, co przeoczyłeś, to <li class="panel"> na liście li, które zawiera wyzwalacz i odpowiednie menu. A w twoim przypadku tęskniłeś za nimi.

BS Kod:

//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) 
    } 

Więc Spróbuj:

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

A ponieważ ten został zaprojektowany do użytku z div trzeba będzie zastąpić pewne zasady specjalnie dla li, jak poniżej.

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

Demo