可折叠的手风琴在dropdpwn菜单Bootstrap中不起作用 [英] Collapsible accordion doesn't work inside a dropdpwn-menu Bootstrap

问题描述

我想将下拉菜单和折叠菜单混合在一起，但是当我在下拉菜单中放置手风琴时，您无法单击手风琴开关。下拉菜单会向上滑动。

这是我的代码。

  < ul class = nav nav-pills> 
< li class = dropdown id = menu1> 
< a class = dropdown-toggle data-toggle = dropdown href =＃menu1> 
下拉菜单
< b class = caret>< / b> 
< / a> 
 
< ul class = dropdown-menu> 
 
< li> 
< a href =＃> Action< / a> 
< / li> 
 
< li class = divider>< / li> 
 
< li> 
< a href =＃>分隔链接< / 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 =手风琴折叠 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 =手风琴身体塌陷> 
< ul class = index-list> 
 ...... 
< / ul> 
< / div> 
< / div> 
< / div> 
< / li> 
< / ul> 
< / li> 
 ... 
< / ul> 
  

这里是链接jsFiddle：
http://jsfiddle.net/DBQU7/26/

解决方案

我不认为手风琴应该包含在下拉菜单中。

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

这是我想出的。

实时示例： http://jsfiddle.net/Sherbrow/YqsTw/

 < ul class = nav nav-pills> 
< li class = dropdown id = menu1> 
< a class = dropdown-toggle data-toggle = dropdown href =＃menu1> 
下拉菜单
< b class = caret>< / b> 
< / a> 
< ul class = dropdown-menu> 
< li> 
< a href =＃> Action< / a> 
< / li> 
< li class = divider /> 
< li> 
< a href =＃>另一个操作< / a> 
< / li> 
< li class = divider /> 
< li> 
< a href =＃collapsible1 class = accordion-toggle data-parent =＃menu1>手风琴1< / a> 
< / li> 
< li class = collapse in id = collapsible1> 
< a href =＃>可折叠1< / a> 
< / li> 
< li class = divider /> 
< li> 
< a href =＃ data-target =。collapse2 class = accordion-toggle data-parent =＃menu1>手风琴2< / a> 
< / li> 
< li class = collapse crash2> 
< a href =＃>可折叠2< / a> 
< / li> 
< li class = collapse crash2> 
< a href =＃>可折叠2之二< / 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'）; 
 
 //从引导程序自身
 if（actives&& actives.length）{
 hasData = actives.data（'collapse'）; 
如果（hasData& hasData.transitioning）返回； 
 actives.collapse（'hide'）; 
} 
 
 var target = $ this.attr（'data-target'）||（href = $ this.attr（'href'））&& href.replace（/.*（？=＃[ ^ \s] + $）/，''）; // ie7的条带
 
 $（target）.collapse（'toggle'）; 
}）; 
 }）; 
  

I want to mix a dropdown and collapse menu together, but when I implent an accordion inside a dropdown-menu you can not click on the accordion toggle. The dropdown menu slides up.

Here is my code.

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

Here's a link to the jsFiddle: http://jsfiddle.net/DBQU7/26/

解决方案

I don't think that accordions were meant to be included into dropdowns.

I think you have to trigger the accordion yourself, and avoid the extra markup that accordions would normally require. That way you can keep the dropdown style.

Here is what i came up with.

Live example : 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');
    });
});

这篇关于可折叠的手风琴在dropdpwn菜单Bootstrap中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！