Fisarmonica bootstrap/pieghevole non funzionante con ul/li navigation

Question

Sto usando l'ultimo bootstrap e la fisarmonica non funziona affatto. Voglio dire, quando apro il Test 1 con nidificato 'ul', commuta, ma poi quando clicco nel test 2 con un altro 'n' annidato, commuta anche, ma senza test di chiusura 1 ...

Chiunque può aiutarmi? Sembra che non funzioni con 'ul' e 'li' (senza classe del pannello).

Grazie in anticipo.

p.s. Ecco il codice completo della mia fisarmonica prova .. Tutto funziona tranne la chiusura automatica precedente aperta.

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

Prova questo:

script:

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

Controlla qui: Demo

Answer 2

Bootstrap si basa principalmente sull'aggiunta/rimozione delle classi css e delle sue regole. Quindi la struttura deve essere la stessa affinché l'effetto si verifichi come quello di div. Quello che ti sei perso era <li class="panel"> sulle foglie che contengono il grilletto e il rispettivo menu. E nel tuo caso ti mancavano loro.

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

in modo da provare:

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

E poiché questo è stato progettato per essere utilizzato con div si dovrà ignorare alcune regole specificamente per li, come quella qui sotto.

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

Demo