这次给大家带来bootstrap怎么实现可折叠的侧边导航，bootstrap实现可折叠侧边导航的注意事项有哪些，下面就是实战案例，一起来看一下。
【相关视频推荐：Bootstrap教程】
效果图：
源码：
nbsp;html>
<meta>
<meta>
<meta>
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>表格</title>
<meta>
<meta>
<meta>
<link>
<!-- Bootstrap3.3.5 CSS -->
<link>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.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;}
</style>
<p>
</p><p>
</p><p>
</p><p>
<!-- 利用data-target指定要折叠的分组列表 -->
</p><p>
</p><h4>
分组1
<span></span>
</h4>
<!-- .panel-collapse和.collapse标明折叠元素 .in表示要显示出来 -->
<p>
</p>
分组2
内容
<script></script> <script></script> <script> $(function(){ $(".panel-heading").click(function(e){ /*切换折叠指示图标*/ $(this).find("span").toggleClass("glyphicon-chevron-down"); $(this).find("span").toggleClass("glyphicon-chevron-up"); }); }); </script>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
