<div class="container">

        <!--该button可以控制div是否显示

            1、首先给button设置data-toggle="collapse"属性

            2、data-target="#demo"用来指定被控制的元素

            3、class="collapse" 默认显示

            4、class="collapse in" 默认隐藏

        -->

        <button class="btn" data-toggle="collapse" data-target="#demo">折叠</button>

        <div id="demo" class="well collapse in">被控制是否显示的div</div>

    </div>
div class="container">

        <div class="row">

            <!--

                有折叠功能的菜单栏

                1、所有的菜单都放在panel-group中

                2、panel panel-default为一级菜单

                3、如何有多个以及菜单则添加多个panel panel-default

            -->

            <div class="panel-group">

                <div class="panel panel-default">

                    <div class="panel-heading">

                        <h4 class="panel-title">

                            <a href="#" data-toggle="collapse" data-target="#demo1">栏目管理</a></h4>

                    </div>

                    <div class="panel-collapse collapse" id="demo1">

                        <div class="panel-body">

                            <a href="#">栏目管理1</a>

                            <a href="#">栏目管理1</a>

                            <a href="#">栏目管理1</a>

                            <a href="#">栏目管理1</a>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

想实现当某个菜单打开，其他菜单折叠的效果

只需要给

1、class="panel-group" 的div设置一个id

2、将<a href="#" data-toggle="collapse" data-target="#demo1">栏目管理</a></h4> 的data-parent的id设置为第一个设置的id即可

<div class="panel-group" id="haha">

                <div class="panel panel-default">

                    <div class="panel-heading">

                        <h4 class="panel-title">

                            <a href="#" data-toggle="collapse" data-target="#demo1" data-parent="#haha">栏目管理</a></h4>

                    </div>

                    <div class="panel-collapse collapse" id="demo1">

                        <div class="panel-body">

                            <a href="#">栏目管理1</a>

                            <a href="#">栏目管理1</a>

                            <a href="#">栏目管理1</a>

                            <a href="#">栏目管理1</a>

                        </div>

                    </div>

                </div>

                <div class="panel panel-default">

                    <div class="panel-heading">

                        <h4 class="panel-title">

                            <a href="#" data-toggle="collapse" data-target="#demo2" data-parent="#haha">用户</a></h4>

                    </div>

                    <div class="panel-collapse collapse" id="demo2">

                        <div class="panel-body">

                            <a href="#">栏目管理1</a>

                            <a href="#">栏目管理1</a>

                            <a href="#">栏目管理1</a>

                            <a href="#">栏目管理1</a>

                        </div>

                    </div>

                </div>

                <div class="panel panel-default">

                    <div class="panel-heading">

                        <h4 class="panel-title">

                            <a href="#" data-toggle="collapse" data-target="#demo3">用户</a></h4>

                    </div>

                    <div class="panel-collapse collapse" id="demo23">

                        <div class="panel-body">

                            <a href="#">栏目管理1</a>

                            <a href="#">栏目管理1</a>

                            <a href="#">栏目管理1</a>

                            <a href="#">栏目管理1</a>

                        </div>

                    </div>

                </div>

            </div>

最终的折叠菜单栏效果

<div class="panel-group" id="haha1">

                <div class="panel panel-default">

                    <div class="panel-heading">

                        <h4 class="panel-title">

                            <a href="#" data-toggle="collapse" data-target="#demo4" data-parent="#haha1">栏目管理</a></h4>

                    </div>

                    <div class="panel-collapse collapse" id="demo4">

                        <ul class="list-group">

                            <li class="list-group-item" ><a href="#">栏目管理1</a></li>

                            <li class="list-group-item" ><a href="#">栏目管理1</a></li>

                            <li class="list-group-item" ><a href="#">栏目管理1</a></li>

                        </ul>

                    </div>

                </div>

            </div>
 

最新文章

  1. VIM 解决中文乱码
  2. android studio 导入项目太慢(卡条)
  3. php : 自定义分页类
  4. Java多线程干货系列（1）：Java多线程基础
  5. The Truth About .NET Objects And Sharing Them Between AppDomains
  6. php cgi 与 cli 区别
  7. CentOS 7 上面安装PowerShell
  8. Servlet，JSP 中的中文乱码问题以及解决方案
  9. mongodb副本集中其中一个节点宕机无法重启的问题
  10. Linq中类型转换
  11. oracle入门之对表数据查询（二）
  12. java基础 包装类
  13. oracle的存储过程和定时任务编写体会
  14. Redis安装完后redis-cli无法使用（redis-cli: command not found）已使用
  15. new image的使用
  16. golang yaml配置文件解析
  17. Flask 目录
  18. 奇怪吸引子---Bouali
  19. POJ 2676 Sudoku (数独 DFS)
  20. Dubbo简单环境搭建

热门文章

  1. [转帖]crontab每小时运行一次
  2. java当中JDBC当中Scrollable和Updatable ResultSet的用法和Helloworld例子
  3. Zuul【基础配置】
  4. c#序列化基类（包含派生类继承DynamicObject和 IXmlSerializable）对象
  5. nginx 二级目录高级写法
  6. 第五章 模块之random 、hashlib、time /datetime
  7. php获取当前月的天数
  8. Docker in Docker(实际上是 Docker outside Docker): /var/run/docker.sock
  9. 用ASP.NET Web API技术开发HTTP接口（一）
  10. shell 学习笔记5-shell-if语句