可折叠手风琴在dropdpwn-menu内不起作用引导

Question

我想将下拉菜单和折叠菜单组合在一起，但是当我在下拉菜单中实现手风琴时，无法单击手风琴切换。下拉菜单向上滑动。

这是我的代码。

<ul class="nav nav-pills"> 
    <li class="dropdown" id="menu1"> 
    <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1"> 
     Dropdown 
     <b class="caret"></b> 
    </a> 

    <ul class="dropdown-menu"> 

     <li> 
     <a href="#">Action</a> 
     </li> 

     <li class="divider"></li> 

     <li> 
     <a href="#">Separated link</a> 
     </li> 

     <li> 
     <div class="accordion" id="accordion2"> 

      <div class="accordion-group"> 

      <a class="accordion-toggle" 
       data-toggle="collapse" 
       data-parent="#accordion2" 
       href="#demo1"> 

       aaa 

      </a> 

      <div id="demo1" class="accordion-body collapse" style="height: 0px; "> 
       <ul class="index-list"> 
       ...... 
       </ul>    
      </div>     
      </div> 

      <div class="accordion-group"> 

      <a class="accordion-toggle" 
       data-toggle="collapse" 
       data-parent="#accordion2" 
       href="#demo2"> 

       aaa 

      </a> 

      <div id="demo2" class="accordion-body collapse"> 
       <ul class="index-list"> 
       ...... 
       </ul>    
      </div>    
      </div> 
     </div> 
     </li> 
    </ul> 
    </li> 
    ... 
</ul>​ 

下面是对的jsfiddle链接： http://jsfiddle.net/DBQU7/26/

Answer 1

我不认为手风琴注定要被纳入下拉菜单。

我认为你必须自己触发手风琴，并避免手风琴通常需要的额外标记。这样你可以保持下拉风格。

这是我想出来的。

活生生的例子：http://jsfiddle.net/Sherbrow/YqsTw/

<ul class="nav nav-pills"> 
    <li class="dropdown" id="menu1"> 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1"> 
    Dropdown 
      <b class="caret"></b> 
     </a> 
     <ul class="dropdown-menu"> 
      <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 in" 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> 
    </li> 
</ul> 

$('.dropdown-toggle').dropdown(); 
$('.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'); 
    }); 
});