关于bootstrap的Collapse组件问题

花果山摸鱼高手 发布于 2015/11/16 21:58
阅读 1K+
收藏 0

 collapse   这个组件阿,我写了三组折叠菜单出来,可以实现点击折叠和展开,但是我想的要效果是,一次点击只显示一组菜单 。比如我有ABC,三组菜单 ,我点A的时候,A下面的内容展开,我再点B时,A组展开的折叠,然后B组展开,再点C组的时候,B组折叠,C组展开。以此类推,就是一次只展开一个组,别的组折叠。

代码如下:

<ul class="list-unstyled">
       <!-- 一级菜单 -->
       <li>
           <a href="#one" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="#one">一级</a>
           
           <ul class="list-unstyled collapse" id="one" role="1">
              <li><a href="">一级-1</a></li>
              <li><a href="">一级-2</a></li>
              <li><a href="">一级3</a></li>
           </ul>
       </li>
       
       <!-- 二级菜单 -->
       <li>
           <a href="#two" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="#two">二级</a>
           
           <ul class="list-unstyled collapse" id="two" role="1">
               <li><a href="">二级1</a></li>
               <li><a href="">二级2</a></li>
               <li><a href="">二级3</a></li>
           </ul>
       </li>
       
       <!-- 三级菜单 -->
       <li>
           <a href="#stree" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="#stree">三级</a>
           
           <ul class="list-unstyled collapse" id="stree" role="1">
               <li><a href="">三级1</a></li>
               <li><a href="">三级2</a></li>
               <li><a href="">三级3</a></li>
           </ul>
       </li>
   </ul>

加载中
0
lieefu
lieefu
请参考如下代码:
<div id="top">
<ul class="list-unstyled">
       <!-- 一级菜单 -->
       <li>
           <a href="#one" role="button" data-toggle="collapse" data-parent="#top" aria-expanded="false" aria-controls="#one">一级</a>
           
           <ul class="list-unstyled collapse" id="one" role="1">
              <li><a href="">一级-1</a></li>
              <li><a href="">一级-2</a></li>
              <li><a href="">一级3</a></li>
           </ul>
       </li>
       
       <!-- 二级菜单 -->
       <li>
           <a href="#two" role="button" data-toggle="collapse" data-parent="#top" aria-expanded="false" aria-controls="#two">二级</a>
           
           <ul class="list-unstyled collapse" id="two" role="1">
               <li><a href="">二级1</a></li>
               <li><a href="">二级2</a></li>
               <li><a href="">二级3</a></li>
           </ul>
       </li>
       
       <!-- 三级菜单 -->
       <li>
           <a href="#stree" role="button" data-toggle="collapse" data-parent="#top" aria-expanded="false" aria-controls="#stree">三级</a>
           
           <ul class="list-unstyled collapse" id="stree" role="1">
               <li><a href="">三级1</a></li>
               <li><a href="">三级2</a></li>
               <li><a href="">三级3</a></li>
           </ul>
       </li>
   </ul>
</div>



花果山摸鱼高手
花果山摸鱼高手
并没有用。
返回顶部
顶部