twitter-bootstrap Bootstrap 3 : 如何显示侧面导航栏的子菜单，每个菜单的底部？

Bootstrap 3 :How to display sub-menu of side navigation bar, bottom of each menu?

提问by mridul

I am trying to make side navigation bar using Bootstrap 3. Now sub-menus are display right side of the each menu. I want to display it bottom of parent menu.

我正在尝试使用 Bootstrap 3 制作侧面导航栏。现在子菜单显示在每个菜单的右侧。我想在父菜单的底部显示它。

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">


      <li class="dropdown-submenu">
        <a tabindex="-1" href="#">More options</a>
        <ul class="dropdown-menu">
          <li class="dropdown-submenu">
            <a href="#">More..</a>
            <ul class="dropdown-menu">
                <li><a href="#">3rd level</a></li>
                <li><a href="#">3rd level</a></li>
            </ul>
          </li>
        </ul>
      </li>


      <li class="divider"></li>
      <li class="dropdown-submenu">
        <a tabindex="-1" href="#">More options2</a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">Second level</a></li>
          <li class="dropdown-submenu">
            <a href="#">More..</a>
            <ul class="dropdown-menu">
                <li><a href="#">3rd level</a></li>
                <li><a href="#">3rd level</a></li>
            </ul>
          </li>
          <li><a href="#">Second level</a></li>
          <li><a href="#">Second level</a></li>
        </ul>
      </li>
    </ul>

Here is the Demo.

这是演示。

Edit: I try to do it using collapse jsfiddle.net/mridulpv/Wrh8x/5. But still some problems. I want to hide collapse item at starting, and remove horizondal line etc.

编辑：我尝试使用 collapse jsfiddle.net/mridulpv/Wrh8x/5来做到这一点。但是还是有些问题。我想在开始时隐藏折叠项目，并删除水平线等。

回答by Don

You can achieve this effect by not removing the sub-menus from the document flow. This means everything gets pushed down when the menu item is hovered. This does cause a problem with the third level, as when you mouse-out of the third level everything collapses up and you lose focus, but I don't believe it would be hard to get this menu functioning with clicks instead of hovers. (simply add/remove a class on click. See Edit.)

您可以通过不从文档流中删除子菜单来实现此效果。这意味着当菜单项悬停时，一切都会被按下。这确实会导致第三层出现问题，因为当您将鼠标移出第三层时，一切都会崩溃并且您失去焦点，但我认为通过点击而不是悬停来使此菜单正常运行并不难。（只需在单击时添加/删除类。请参阅编辑。）

But here's what you want to do:

但这是你想要做的：

.dropdown-submenu > .dropdown-menu{
    position: relative;
    left: 0;
    top: 0;
    margin: 0;
}

http://jsfiddle.net/HCxB8/4/

http://jsfiddle.net/HCxB8/4/

You'll see as you mouse over the menu gets pushed down. This is due to me positioning relative rather than absolute.

当您将鼠标悬停在菜单上时，您会看到被按下。这是由于我定位相对而不是绝对。

EDIT:

编辑：

With a bit more fiddling I managed to get clicking to work with very minimal jquery and a bit more css:

通过更多的摆弄，我设法点击以使用非常少的 jquery 和更多的 css：

JS:

JS：

$('.dropdown-submenu > a').click(function(){
    $(this).parent().children('.dropdown-menu').toggleClass('shown');
});

CSS:

CSS：

.dropdown-submenu > .dropdown-menu{
    position: relative;
    left: 0;
    top: 0;
    margin: 0;
}

.dropdown-submenu:hover > .dropdown-menu{
    display: none;
}

.shown{
    display: block;
}

.dropdown-submenu:hover > .shown{
    display: block;
}

http://jsfiddle.net/HCxB8/5/

http://jsfiddle.net/HCxB8/5/