Bootstrap akordeon/katlanamaz ul/li ile çalışmayan navigasyon

Question

En son bootstrap'i kullanıyorum ve akordeon çalışmıyor… Yani, test 1'i nested 'ul' ile açtığımda açılınca, Başka bir yuvalanmış 'ul' ile test 2'de, aynı zamanda kapanır, ancak kapanış testi olmadan 1 ...

Herhangi biri bana yardımcı olabilir? Görünüşe göre 'ul' ve 'li' ile çalışmaz (panel sınıfı olmadan).

Şimdiden teşekkürler.

Not; İşte benim akordumun tam kodu denemeye çalışın .. Her şey daha önce açılan otomatik kapanma dışında çalışıyor.

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

bu deneyin:

senaryo:

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

Lütfen kontrol edin: Demo

Answer 2

Bootstrap çoğunlukla css sınıflarını ve kurallarını ekleyerek/kaldırmaya çalışır. Böylece yapının, div ile aynı etkiyi gerçekleştirmesi için aynı olması gerekir. Kaçırdığınız şey, tetikleyiciyi ve ilgili menüyü tutan yaprak li'sinde <li class="panel"> idi. Ve senin durumunda, onları kaçırdın.

BS Kodu:

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

Yani deneyin:

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

Ve bu yana

Aşağıdakine benzeyen, li için özel bazı kuralları geçersiz zorunda kalacak div birlikte kullanılmak üzere tasarlanmıştır.

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

Demo