कोणीय यूआई मल्टी लेवल ड्रॉपडाउन टॉगल

Question

मैं बहु-स्तर/नेस्टेड ड्रॉप डाउन बनाने के लिए कोणीय UI Dropdown Toggle का उपयोग करने का प्रयास कर रहा हूं।

जब मैं ड्रॉपडाउन के पहले स्तर पर क्लिक करता हूं तो यह पूरी तरह से बंद हो जाता है और दूसरे स्तर को प्रकट नहीं करता है।

मैंने जो कुछ हासिल करने की कोशिश कर रहा है उसके एक नंगे हड्डियों के संस्करण को प्रदर्शित करने के लिए मैंने एक बहुत ही बुनियादी योजनाकार संलग्न किया है।

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

किसी भी मदद की बहुत सराहना की।

धन्यवाद

Answer 1

आप इस लक्ष्य को हासिल करने के लिए वर्ग "ड्रॉप-डाउन-सबमेनू" का उपयोग कर सकते हैं।

<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

उप-मेनू को बूस्ट्रैप 3 से हटा दिया गया है क्योंकि इसे मोबाइल के लिए अप्रासंगिक समझा जाता है।

"Submenus सिर्फ वेब पर एक जगह की बहुत अभी, विशेष रूप से मोबाइल वेब नहीं है वे 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>