Свертывание нескольких загрузочных буферов navbar

Question

Я выполнил этот пример http://jsfiddle.net/rDN3P/98/, чтобы создать сворачивающуюся навигационную панель. Он работает нормально, пока у меня есть один уровень в моем меню. Коллапс, похоже, не работает, если у меня есть несколько уровней меню.

В этом примере, если вы открываете складное меню и нажимаете на второй пункт «dropdown2» в меню, вы будете знать, что я имею в виду.

Эта структура является вопрос я предполагаю

<li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 

      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
        Dropdown2 

        <span class="caret"></span> 
       </a> 

       <ul class="dropdown-menu" role="menu"> 
        <li><a href="#">Action sub</a></li> 
       </ul> 

      </li>  

Answer 1

Решено: jsfiddle

на основе this answer добавить меню третьего уровня с небольшим изменением кода JS, чтобы закрыть меню третьего уровня на клик :

$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) { 
    // Avoid following the href location when clicking 
    event.preventDefault(); 

    // Avoid having the menu to close when clicking 
    event.stopPropagation(); 

// If a menu is already open we close it 
if($(this).parent().hasClass('open')){ 
    $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open'); 
}else{ 
    // opening the one you clicked on 
$(this).parent().addClass('open'); 

var menu = $(this).parent().find("ul"); 
var menupos = menu.offset(); 

if ((menupos.left + menu.width()) + 30 > $(window).width()) { 
    var newpos = - menu.width();  
} else { 
    var newpos = $(this).parent().width(); 
} 
menu.css({ left:newpos }); 
} 

}); 

Answer 2

<li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
     <li class="dropdown-submenu"> 
      <a href="#"> 
       Dropdown2 
      </a> 

      <ul class="dropdown-menu" role="menu"> 
       <li><a href="#">Action sub</a></li> 
      </ul> 

     </li> 

вложенности должны быть дон Правильно, я думаю, с правильными классами.