这次给大家带来Bootstrap怎么实现可折叠的侧边导航，Bootstrap实现可折叠侧边导航的注意事项有哪些，下面就是实战案例，一起来看一下。
效果图：
源码：
表格
.panel-group{max-height:770px;overflow: auto;}
.leftMenu{margin:10px;margin-top:5px;}
.leftMenu .panel-heading{font-size:14px;padding-left:20px;height:36px;line-height:36px;color:white;position:relative;cursor:pointer;}/*转成手形图标*/
.leftMenu .panel-heading span{position:absolute;right:10px;top:12px;}
.leftMenu .menu-item-left{padding: 2px; background: transparent; border:1px solid transparent;border-radius: 6px;}
.leftMenu .menu-item-left:hover{background:#C4E3F3;border:1px solid #1E90FF;}
分组1
分组项1-1
分组项1-2
分组项1-3
分组项1-4
分组项1-5
分组项1-6
分组项1-7
分组项1-8
分组项1-9
分组项1-10
分组项1-11
分组2
分组项2-1
分组项2-2
分组项2-3
分组项2-4
内容
$(function(){
$(".panel-heading").click(function(e){
/*切换折叠指示图标*/
$(this).find("span").toggleClass("glyphicon-chevron-down");
$(this).find("span").toggleClass("glyphicon-chevron-up");
});
});
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
