Çok seviyeli katlanabilir Bootstrap yan-nav menüsü ile ilgili sorun

Question

Ben de aynı sorundan bir örnek arıyorum etrafta tarama yapıyorum ama henüz şansım yok. Bootstrap.js kullanarak önyüklemede çok katlı katlanabilir bir yan gezinme oluşturmaya çalışıyorum.

Sorunum, ikinci düzeyde eklediğim, ancak açmak için tetiklemek için liste öğesine tıkladığımda tüm menüyü daraltmasıdır. Menüyü tekrar açtığımda, ikinci seviye menü de açık. Benim kod aşağıda:

  <div class="sidebar-nav"> 
     <p class="sidenav-header">Units and Lessons:</p> 
     <ul class="nav nav-list"> 
     <li class="nav-header" data-toggle="collapse" data-target="#content-areas"> <span class="nav-header-primary"> 
       Content Areas 
     </span> 
      <ul class="nav nav-list collapse" id="content-areas"> 
       <li><a href="#" title="Title">All</a></li> 
       <li><a href="#" title="Title">Urban Planning</a></li> 
       <li><a href="#" title="Title">Sustainability</a></li> 
       <li><a href="#" title="Title">Public Administration</a></li> 
       <li data-toggle="collapse" data-target="#nav-health" data-parent="#content-areas"><a href="#" title="Title">Health</a> 
        <ul class="nav-secondary nav-list collapse" id="nav-health"> 
        <li><a href="#" title="Title">Introduction</a></li> 
        <li><a href="#" title="Title">Lesson: What is Epilepsy?</a></li> 
        <li><a href="#" title="Title">Lesson: Pathology</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
      <li class="nav-header" data-toggle="collapse" data-target="#languages"> <span class="nav-header-primary"> 
       Languages 
     </span> 
      <ul class="nav nav-list collapse" id="languages"> 
       <li><a href="#" title="Title">All</a></li> 
       <li><a href="#" title="Title">Arabic</a></li> 
       <li><a href="#" title="Title">Turkish</a></li> 
       <li><a href="#" title="Title">Hebrew</a></li> 
      </ul> 
     </li> 
    </ul> 

     </div> 

bahsediyorum özgü bölüm "İçerik Alanları" başlığı altında, "Sağlık" liste öğesinin altında.

Her türlü yardım büyük beğeni topluyor. Teşekkürler!

Answer 1

İşaretlemenizdeki sorun, listede tıklatmaya çalıştığınızda tüm menünün daraltılmış olmasıdır. Örneğin, İçerik Alanlarının İçindeki Tümü tıklatırsanız, İçerik Alanları'nı daraltın. Aynı durum ikinci seviye menü için de geçerlidir.

Belirtilen bir akordeon başlığınız olmadığı için bunun nedeni. Eğer böyle bir örnek bulacaksınız Bootstrap Collapse Documentation içine bir göz atın: Belirttiğiniz kez

<div class="accordion-heading"> 
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
    Collapsible Group Item #1 
    </a> 

ikinci düzey nav başlığı iyi çalışması gerekir. Doğrulamak için fiddle oluşturdum. İçerik Alanlarını Documentation'a göre değiştirdim ve ikinci seviye menüsü iyi çalıştı. Ancak, Diller menü öğelerini değiştirmedim, böylece nasıl çalıştığını görebilirsiniz (Diller genişledikten sonra liste içinde tıklamayı deneyin)

Answer 2

Pitamber örneğine benzer olsa da, özellikle bazı ek sınıfları eklemem. "accoridan-heading" sınıfına sahip div eki, bu sınıfı a etiketine uygulamanız yeterlidir.

<ul class="nav nav-list"> 
    <li> 
    <a>Menu Item with No Sub-Items</a> 
    </li> 
    <li> 
    <a class="accordion-heading" data-toggle="collapse" data-target="#submenu"> 
     <span class="nav-header-primary">Menu Item with Sub-Items <b class="caret"></b></span> 
    </a> 
    <ul class="nav nav-list collapse" id="submenu"> 
     <li><a href="#" title="Title">Sub Item 1</a></li> 
     <li><a href="#" title="Title">Sub Item 2</a></li> 
     <li><a href="#" title="Title">Sub Item 3</a></li> 
     <li><a href="#" title="Title">Sub Item 4</a></li> 
    </ul> 
    </li> 
</ul> 

Sen ileri gitmek ve CSS ekleyip ya da bazı JS alt menüsünde bazı kontrast yerleştirmek ve ayrıca/çevirme bir menü öğesi genişletilmiş ve daraltılmış zaman şapka simgesini değiştirmek için olabilir.