angularjs कोणीय UI बहु-स्तरीय ड्रॉपडाउन टॉगल




drop-down-menu toggle (3)

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

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

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

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

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

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

कोई मदद, बहुत सराहना की।

धन्यवाद


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

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>

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

"उपमेनुज़ के पास अभी वेब पर ज्यादा जगह नहीं है, खासकर मोबाइल वेब। उन्हें 3.0 से निकाल दिया जाएगा" - https://github.com/twbs/bootstrap/pull/6342

एक उदाहरण जो बूटस्ट्रैप 3.0.0 (अंतिम) का उपयोग करता है: http://bootply.com/86684

स्टैक ओवरफ्लो पोस्ट से कोड: बूटस्ट्रैप 3 ड्रॉपडाउन उप मेनू अनुपलब्ध है





angular-bootstrap