angularjs - Angular UI 多级下拉切换

Question

我正在尝试使用 Angular UI Dropdown Toggle创建多级/嵌套下拉菜单。

当我单击下拉菜单的第一级时，它会完全关闭并且不会显示第二层。

我附上了一个非常基本的 plunkr 来演示我正在尝试实现的基本版本。

http://plnkr.co/edit/c0GbKQoYWICXwd3JRWGV?p=info

任何帮助，非常感谢。

谢谢

Answer 1

子菜单已从 Boostrap 3 中删除，因为它被认为与移动设备无关。

“子菜单现在在网络上没有太多的位置，尤其是移动网络。它们将在 3.0 中被删除” - https://github.com/twbs/bootstrap/pull/6342

使用 Bootstrap 3.0.0（最终版）的示例：http: //bootply.com/86684

StackOverflow 帖子中的代码： 缺少 Bootstrap 3 下拉子菜单

Answer 2

您可以使用“下拉子菜单”类来实现这一点。

<div class="btn-group dropdown">
  <button class="dropdown-toggle">Toggle</button>
  <ul class="dropdown-menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li class="dropdown-submenu">
      Sub List
      <ul class="dropdown-menu">
        <li>Submenu Item 1</li>
        <li>Submenu Item 2</li>
      </ul>
    </li>
  </ul>
</div>

Answer 3

您可以使用 ng-bootstrap-submenu 模块来获取您正在寻找的子菜单。

https://www.npmjs.com/package/ng-bootstrap-submenu

这是一个plnkr演示它的用法。

<nav class="navbar navbar-default">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <a class="navbar-brand">ng-bootstrap-submenu</a>
    </div>

    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <bootstrap-submenu ng-repeat="item in menuItems" menu-item="item">
        </bootstrap-submenu>
      </ul>
    </div>
</nav>