다단계 접을 수있는 문제 부트 스트랩 사이드 탐색 메뉴

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

마크 업 문제는 목록 내에서 클릭하려고하면 전체 메뉴가 축소된다는 것입니다. 예를 들어 콘텐츠 영역 내부의 모든 항목을 클릭하면 내용 영역이 축소됩니다. 두 번째 레벨 메뉴 인 건강 상태에서도 마찬가지입니다.

아코디언 머리글을 지정하지 않았기 때문에 발생합니다. 이 같은 예를 찾을 곳 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에 따라 컨텐츠 영역을 수정했으며 두 번째 레벨 메뉴가 정상적으로 작동했습니다. 그러나 Languages ​​메뉴 항목을 수정하지 않아서 어떻게 동작하는지 볼 수 있습니다 (언어가 확장되면 목록 내에서 클릭 해보십시오).

Answer 2

필자는 Pitamber의 예와 마찬가지로 몇 가지 추가 클래스 여분의 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> 

당신은 더 나아가 CSS를 추가하고 또는 일부 JS는 하위 메뉴에 약간의 대비를 배치하고, 또한/플립 메뉴 항목이 확장하거나 축소 할 때 캐럿 아이콘을 변경할 수 있습니다.