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>

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

折叠多个导航栏引导程序

2 个答案: