2 уровня выпадающего меню в бутстрапе, работающем только с щелчком

Question

Я пытаюсь заставить вложенное выпадающее меню без hover. В настоящее время код ниже показывает только вложенное раскрывающееся меню только при активированном hover. Я хочу заставить его только щелчком, так что в мобильной версии сайта это вызовет любые проблемы. Эффект, который я пытаюсь достичь выглядит следующим образом: http://www.meanthemes.com/demo/meanmenu/demo.html

Подходы:

1. я пытался поставить dropdown-toggle внутри drop-down-toggle, но не будет отображаться вложенная выпадающий.

   <div class="nav-collapse collapse"> 
   <ul class="nav"> 
   <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Buildings/Land <b class="caret"></b></a> 
   <ul class="dropdown-menu"> 
   
       <li class="dropdown-submenu"><a tabindex="-2" href="#"><img src="icons/huron-river-prot_icon.png" class="icons-images">Huron River Protection</a> 
       <ul class="dropdown-menu"> 
        <li><a href="#"><img src="icons/green-roof_icon.png" class="icons-images">Green Roof</a></li> 
        <li><a href="#"><img src="icons/huron-river-prot_icon.png" class="icons-images">Porous pavement</a></li> 
        <li><a href="#"><img src="icons/retention-detention_icon.png" class="icons-images">Retention/detention</a></li> 
       </ul> 
       </li> 
   
       </ul> 
        </li>   
   </ul> 
   </div> 
   

Answer 1

я сделал что-то подобное. Я создаю скрипку для вас :)

HTML очень похож на ваш. Я использовал jquery, чтобы идентифицировать меню второго уровня и открыть их при нажатии.

 $(document).ready(function(){ 
    $('.dropdown .dropdown').each(function(){ 
     var $self = $(this); 
     var handle = $self.children('[data-toggle="dropdown"]'); 
     $(handle).click(function(){ 
      var submenu = $self.children('.dropdown-menu'); 
      $(submenu).toggle(); 
      return false; 
     }); 
    }); 
}); 

и мне пришлось использовать следующий CSS поверх бутстрапа, чтобы меню второго уровня открывалось сбоку.

.dropdown-menu .dropdown-menu { 
top: 0; 
left: 100%; 
margin: 0; 
padding: 0; 
} 

http://jsfiddle.net/elewinso/Upmx8/

Я надеюсь, что это помогает.