bootstrap之collapse

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