帶摺疊的引導多級下拉菜單

Question

我試圖用引導完成多級可摺疊下拉邊欄。 到目前爲止，我已經達到了這一點（從其他人跟進） 當我打開一個新手風琴並突出顯示活動手風琴時，我正試圖關閉其他開放手風琴。

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

Answer 1

添加ID = 「菜單1」 到UL標籤。數據父級必須參考現有的dom。