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