折叠多个导航栏引导程序

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

基于此答案 ，添加第三级菜单，对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>

我猜应该使用正确的类正确完成嵌套。