각 UI 다단계 드롭 다운 토글

Question

각형/중첩 드롭 다운을 만들기 위해 각도 UI Dropdown Toggle을 사용하려고합니다.

드롭 다운의 첫 번째 레벨을 클릭하면 간단히 닫히고 두 번째 계층이 표시되지 않습니다.

나는 아주 기본적인 plunkr을 첨부하여 내가 얻으 려던 것의 맨손의 버전을 보여줍니다.

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

어떤 도움이 크게 감사합니다.

감사합니다.

Answer 1

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

Answer 2

하위 메뉴는 모바일과 관련이 없으므로 Boostrap 3에서 제거되었습니다.

"서브 메뉴는 특히 모바일 웹, 현재 웹에있는 장소의 대부분이없는 그들은 3.0 제거됩니다."- https://github.com/twbs/bootstrap/pull/6342

부트 스트랩 3.0 사용하는 예입니다. 0 (최종) : StackOverflow의 게시물에서 http://bootply.com/86684

코드 : Bootstrap 3 dropdown sub menu missing

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>