Angular UI Multi-Level Dropdown Toggle

Question

Ich versuche, die Angular UI Dropdown Toggle verwenden, um eine Multi-Level/verschachtelte Dropdown zu erstellen.

Wenn ich auf die erste Ebene des Dropdown-Menüs klicke, wird es einfach geschlossen und die zweite Ebene wird nicht angezeigt.

Ich habe einen sehr einfachen Plunkr beigefügt, um eine nackte Knochenversion von dem zu demonstrieren, was ich erreichen will.

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

Jede Hilfe, sehr geschätzt.

Dank

Answer 1

Sie können die Klasse „Drop-Down-Menü“ verwenden, um dies zu erreichen.

<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 2

Das Untermenü wurde von Boostrap 3 entfernt, da es für das Mobiltelefon als irrelevant gilt.

„Submenüs hat einfach nicht viel von einem Platz auf dem Netz jetzt, vor allem der mobilen Web-Sie werden mit 3,0 entfernt werden.“ - https://github.com/twbs/bootstrap/pull/6342

Ein Beispiel, das Bootstrap 3.0 verwendet. 0 (final): http://bootply.com/86684

-Code von Stackoverflow Beitrag: Bootstrap 3 dropdown sub menu missing

Answer 3

Sie können das ng-bootstrap-Untermenü verwenden, um das gewünschte Untermenü zu erhalten.

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

Hier ist eine plnkr Nutzung ist es zu demonstrieren.

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