Bootstrap 可收合的折迭式面板无法在下拉式pwn-menu启动载入中运作

6ljaweal  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(1)|浏览(216)

我想把下拉菜单和折叠菜单混合在一起,但是当我在下拉菜单中实现折叠时,你不能点击折叠开关。下拉菜单会向上滑动。
这是我的代码。

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

6qftjkof

6qftjkof1#

我不认为 accordion 是要包括在下拉菜单。
我认为您必须自己触发折叠式按钮,并避免折叠式按钮通常需要的额外标记。这样您就可以保持下拉式样式。
这是我想到的。
示例:http://jsfiddle.net/Sherbrow/YqsTw/
第一个

相关问题