बहु-स्तर के ढहने वाले बूटस्ट्रैप साइड-एनवी मेनू

Question

के साथ समस्या मैं एक ही समस्या का उदाहरण ढूंढ रहा हूं, लेकिन अभी तक कोई भाग्य नहीं है। मैं bootstrap.js का उपयोग कर बूटस्ट्रैप में एक बहु-स्तरीय ढहने वाली साइड नेविगेशन बनाने की कोशिश कर रहा हूं।

मेरी समस्या यह है कि मैंने दूसरे स्तर पर जोड़ा है, लेकिन जब मैं इसे खोलने के लिए ट्रिगर करने के लिए सूची आइटम पर क्लिक करता हूं तो यह पूरे मेनू को ध्वस्त कर देता है। जब मैं मेनू को फिर से खोलता हूं, तो दूसरा-स्तर मेनू भी खुला होता है। मेरे कोड के नीचे है:

  <div class="sidebar-nav"> 
     <p class="sidenav-header">Units and Lessons:</p> 
     <ul class="nav nav-list"> 
     <li class="nav-header" data-toggle="collapse" data-target="#content-areas"> <span class="nav-header-primary"> 
       Content Areas 
     </span> 
      <ul class="nav nav-list collapse" id="content-areas"> 
       <li><a href="#" title="Title">All</a></li> 
       <li><a href="#" title="Title">Urban Planning</a></li> 
       <li><a href="#" title="Title">Sustainability</a></li> 
       <li><a href="#" title="Title">Public Administration</a></li> 
       <li data-toggle="collapse" data-target="#nav-health" data-parent="#content-areas"><a href="#" title="Title">Health</a> 
        <ul class="nav-secondary nav-list collapse" id="nav-health"> 
        <li><a href="#" title="Title">Introduction</a></li> 
        <li><a href="#" title="Title">Lesson: What is Epilepsy?</a></li> 
        <li><a href="#" title="Title">Lesson: Pathology</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
      <li class="nav-header" data-toggle="collapse" data-target="#languages"> <span class="nav-header-primary"> 
       Languages 
     </span> 
      <ul class="nav nav-list collapse" id="languages"> 
       <li><a href="#" title="Title">All</a></li> 
       <li><a href="#" title="Title">Arabic</a></li> 
       <li><a href="#" title="Title">Turkish</a></li> 
       <li><a href="#" title="Title">Hebrew</a></li> 
      </ul> 
     </li> 
    </ul> 

     </div> 

विशिष्ट अनुभाग के बारे में मैं बात कर रहा हूँ के तहत "सामग्री क्षेत्रों" "स्वास्थ्य" सूची मद के अंतर्गत है।

किसी भी मदद की बहुत सराहना की जाती है। धन्यवाद!

Answer 1

आपके मार्कअप के साथ समस्या यह है कि जब आप सूची में क्लिक करने का प्रयास करते हैं तो पूरा मेनू ध्वस्त हो जाता है। उदाहरण के लिए, यदि आप सामग्री क्षेत्रों के अंदर सभी क्लिक करते हैं तो यह सामग्री क्षेत्रों को ध्वस्त कर देता है। दूसरे स्तर के मेनू, आपके मामले में स्वास्थ्य के लिए भी यही हो रहा है।

ऐसा इसलिए होता है क्योंकि आपके पास कोई accordion-heading निर्दिष्ट नहीं है। Bootstrap Collapse Documentation में एक नजर डालें, जहां आप इस तरह एक उदाहरण मिल जाएगा:

<div class="accordion-heading"> 
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
    Collapsible Group Item #1 
    </a> 

एक बार जब आप निर्दिष्ट अपने दूसरे स्तर एनएवी शीर्षक ठीक काम करना चाहिए।

मैंने आपके सत्यापन के लिए fiddle बनाया है। मैंने सामग्री क्षेत्रों को Documentation के अनुसार संशोधित किया और दूसरा स्तर मेनू ठीक काम किया। हालांकि, मैंने भाषा मेनू आइटम को संशोधित नहीं किया है ताकि आप देख सकें कि यह कैसे काम कर रहा है (भाषाओं का विस्तार होने के बाद सूची में क्लिक करने का प्रयास करें)

Answer 2

पिटामबर के उदाहरण के समान, मैं कुछ अतिरिक्त कक्षाओं को नहीं जोड़ूंगा, खासकर अतिरिक्त div वर्ग "accoridan-heading" के साथ, बस उस वर्ग को पर टैग पर लागू करें।

<ul class="nav nav-list"> 
    <li> 
    <a>Menu Item with No Sub-Items</a> 
    </li> 
    <li> 
    <a class="accordion-heading" data-toggle="collapse" data-target="#submenu"> 
     <span class="nav-header-primary">Menu Item with Sub-Items <b class="caret"></b></span> 
    </a> 
    <ul class="nav nav-list collapse" id="submenu"> 
     <li><a href="#" title="Title">Sub Item 1</a></li> 
     <li><a href="#" title="Title">Sub Item 2</a></li> 
     <li><a href="#" title="Title">Sub Item 3</a></li> 
     <li><a href="#" title="Title">Sub Item 4</a></li> 
    </ul> 
    </li> 
</ul> 

आप आगे जा सकते हैं और सीएसएस जोड़ सकते हैं और या कुछ जे एस उप मेनू पर कुछ विपरीत जगह है और यह भी फ्लिप/कैरट चिह्न बदलने के लिए जब एक मेनू आइटम का विस्तार किया और संकुचित हो जाता है करने के लिए।