2016-04-04 16 views
0

Ich versuche, eine Kaskadierung Ansicht in Drop-Down-Menü zu erstellen -> /myApp/app/views/layouts/includes/_site-header.html.erbBootstrap Nested Dropdown on Rails

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

Stufe (oberste Ebene) zeigt korrekt, aber Level 1,1 verschachtelt Drop-Down, nicht zeigt.

Wie kann ich Inline-CSS verwenden, um dies zu korrigieren?

+0

do u wollen gerade 1.1 Link dekorieren? wie zum Beispiel hinzufügen "Stil" Attribut? – 7urkm3n

+0

Level1.1 Link erscheint, aber nichts darunter i.r das Dropdown-Menü unter Level1.1 wird nicht angezeigt – KavitaC

Antwort

0

Sie möchten es Nested Dropdown machen. Hier ist wirklich gutes Beispiel. JSFIDDLE

Quelle von http://jsfiddle.net/chirayu45/yxkut/16/

HTML:

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

$(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(); 
    }); 
});