web-dev-qa-db-ja.com

Angular UIマルチレベルドロップダウントグル

Angular UI Dropdown Toggle を使用して、マルチレベル/ネストされたドロップダウンを作成しようとしています。

ドロップダウンの最初のレベルをクリックすると、単に完全に閉じて、2番目の層が表示されません。

私が達成しようとしていることの骨の折れるバージョンを示すために、非常に基本的なプランカーを添付しました。

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

どんな助けでも、大いに感謝します。

ありがとう

angularjsdrop-down-menutoggleangular-uiangular-bootstrap
6
davislurve

サブメニューは、モバイルには関係ないと見なされたため、Boostrap3から削除されました。

「サブメニューは現在、Web、特にモバイルWeb上にあまり配置されていません。3.0で削除されます」 https://github.com/twbs/bootstrap/pull/6342

Bootstrap 3.0.0（final）：http://bootply.com/86684

StackOverflow投稿からのコード： ブートストラップ3ドロップダウンサブメニューがありません

6
Zymotik

これを実現するには、クラス「dropdown-submenu」を使用できます。

<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>
3
acolve

Ng-bootstrap-submenuモジュールを使用して、探しているサブメニューを取得できます。

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

これが 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>
0
Ryan Langton