Bootstrap İçiçe Açılır

Question

Ben açılır menüde basamaklı görünüm oluşturmak çalışıyorum -> /myApp/app/views/layouts/includes/_site-header.html.erb

<li class="dropdown"> 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Level 1 <span class="caret"></span></a> 
     <ul class="dropdown-menu">          
     <li><%= link_to "Level 1.0.1", "/some_link/link_level_1_0_1" %></li> 
     <li class="dropup"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Level1.1<span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><%= link_to "Level 1.1", "/some_link/link_level_1_1_1" %></li>              
      </ul> 
     </li>        
     </ul> 
    </li> 

Seviye (en üst düzey) doğru gösterir, ancak düzey 1.1 iç içe açılan açılır, değil gösterir.

Bunu düzeltmek için satır içi CSS'yi nasıl kullanabilirim?

Answer 1

Bunu Yapmak İstiyorsunuz Nested Dropdown. İşte gerçekten güzel bir örnek.

<div class="dropdown" style="position:relative"> 
    <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Click Here <span class="caret"></span></a> 
    <ul class="dropdown-menu"> 
     <li> 
      <a class="trigger right-caret">Level 1</a> 
      <ul class="dropdown-menu sub-menu"> 
       <li><a href="#">Level 2</a></li> 
       <li> 
        <a class="trigger right-caret">Level 2</a> 
        <ul class="dropdown-menu sub-menu"> 
         <li><a href="#">Level 3</a></li> 
         <li><a href="#">Level 3</a></li> 
         <li> 
          <a class="trigger right-caret">Level 3</a> 
          <ul class="dropdown-menu sub-menu"> 
           <li><a href="#">Level 4</a></li> 
           <li><a href="#">Level 4</a></li> 
           <li><a href="#">Level 4</a></li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
       <li><a href="#">Level 2</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Level 1</a></li> 
     <li><a href="#">Level 1</a></li> 
    </ul> 
</div> 

JS: http://jsfiddle.net/chirayu45/yxkut/16/

HTML gelen JSFIDDLE

Kaynak

$(function(){ 
    $(".dropdown-menu > li > a.trigger").on("click",function(e){ 
     var current=$(this).next(); 
     var grandparent=$(this).parent().parent(); 
     if($(this).hasClass('left-caret')||$(this).hasClass('right-caret')) 
      $(this).toggleClass('right-caret left-caret'); 
     grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret'); 
     grandparent.find(".sub-menu:visible").not(current).hide(); 
     current.toggle(); 
     e.stopPropagation(); 
    }); 
    $(".dropdown-menu > li > a:not(.trigger)").on("click",function(){ 
     var root=$(this).closest('.dropdown'); 
     root.find('.left-caret').toggleClass('right-caret left-caret'); 
     root.find('.sub-menu:visible').hide(); 
    }); 
});