php 侧边栏导航,Bootstrap怎么实现可折叠的侧边导航

这次给大家带来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

分组2

内容

$(function(){

$(".panel-heading").click(function(e){

/*切换折叠指示图标*/

$(this).find("span").toggleClass("glyphicon-chevron-down");

$(this).find("span").toggleClass("glyphicon-chevron-up");

});

});

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：