php可折叠导航栏,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");

});

});

总结

以上所述是小编给大家介绍的Bootstrap实现可折叠分组侧边导航菜单，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！