붕괴가있는 부트 스트랩 다중 레벨 드롭 다운 메뉴

부트 스트랩이있는 다중 레벨 접을 수있는 드롭 다운 사이드 바를 달성하려고합니다. 지금까지이 지점을 만들었습니다 (다른 사람의 후속 조치) 새 아코디언을 열었을 때 활성 아코디언을 닫고 활성 아코디언을 강조 표시하려고합니다.붕괴가있는 부트 스트랩 다중 레벨 드롭 다운 메뉴

<ul class="dropdown-menu" role="menu" style="display: block; position: static; width: 240px;"> 
    <li> 
     <a href="#">Action</a> 
    </li> 
    <li class="divider"/> 
    <li> 
     <a href="#">Another action</a> 
    </li> 
    <li class="divider"/> 
    <li> 
     <a href="#collapsible1" class="accordion-toggle" data-parent="#menu1">Accordion 1</a> 
    </li> 
    <li class="collapse" id="collapsible1"> 
     <a href="#">Collapsible 1</a> 
    </li> 
    <li class="divider"/> 
    <li> 
     <a href="#" data-target=".collapse2" class="accordion-toggle" data-parent="#menu1">Accordion 2</a> 
    </li> 
    <li class="collapse collapse2"> 
     <a href="#">Collapsible 2</a> 
    </li> 
    <li class="collapse collapse2"> 
     <a href="#">Collapsible 2 bis</a> 
    </li> 
</ul>

JS는

$('.dropdown-toggle').dropdown({ trigger : 'hover' }); 
$('.dropdown-menu').each(function() { 
    $(this).on('click', '.accordion-toggle', function(event) { 
     event.stopPropagation(); 
     var $this = $(this); 

     var parent = $this.data('parent'); 
     var actives = parent && $(parent).find('.collapse.in'); 

     // From bootstrap itself 
     if (actives && actives.length) { 
      hasData = actives.data('collapse'); 
      if (hasData && hasData.transitioning) return; 
      actives.collapse('hide'); 
     } 

     var target = $this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''); //strip for ie7 

     $(target).collapse('toggle'); 
    }); 
}); 


    $('a.dropdown-toggle').each(function(){ 
     $(this).on("click", function() { 
      $('li.dropdown').each(function() { 
       $(this).removeClass('open'); 
      }); 
     }); 
    });

http://jsfiddle.net/YqsTw/27/

출처

2012-12-18 Nickolas Damofli