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

• 分组项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中文网其它相关文章！

推荐阅读：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！