源码：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>表格</title> <meta content="侧边导航菜单(可分组折叠)"> <meta content="侧边导航菜单(可分组折叠)" /> <meta content="True" /> <link href="https://www.jb51.net/img/favicon.ico" > <!-- Bootstrap3.3.5 CSS --> <link href="https://www.jb51.net/css/bootstrap.min.css"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://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> </head> <body> <div> <div> <div role="tablist"> <div> <!-- 利用data-target指定要折叠的分组列表 --> <div data-toggle="collapse" data-target="#collapseListGroup1" role="tab" > <h4> 分组1 <span></span> </h4> </div> <!-- .panel-collapse和.collapse标明折叠元素 .in表示要显示出来 --> <div role="tabpanel" aria-labelledby="collapseListGroupHeading1"> <ul> <li> <!-- 利用data-target指定URL --> <button data-target="test2.html"> <span></span>分组项1-1 </button> </li> <li> <button> <span></span>分组项1-2 </button> </li> <li> <button> <span></span>分组项1-3 </button> </li> <li> <button> <span></span>分组项1-4 </button> </li> <li> <button> <span></span>分组项1-5 </button> </li> <li> <button> <span></span>分组项1-6 </button> </li> <li> <button> <span></span>分组项1-7 </button> </li> <li> <button> <span></span>分组项1-8 </button> </li> <li> <button> <span></span>分组项1-9 </button> </li> <li> <button> <span></span>分组项1-10 </button> </li> <li> <button> <span></span>分组项1-11 </button> </li> </ul> </div> </div><!--panel end--> <div> <div data-toggle="collapse" data-target="#collapseListGroup2" role="tab" > <h4> 分组2 <span></span> </h4> </div> <div role="tabpanel" aria-labelledby="collapseListGroupHeading2"> <ul> <li> <button> <span></span>分组项2-1 </button> </li> <li> <button> <span></span>分组项2-2 </button> </li> <li> <button> <span></span>分组项2-3 </button> </li> <li> <button> <span></span>分组项2-4 </button> </li> </ul> </div> </div> </div> </div> <div> 内容 </div> </div> <!-- jQuery1.11.3 (necessary for Bo otstrap's JavaScript plugins) --> <script src="js/jquery-1.11.3.min.js "></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js "></script> <script> $(function(){ $(".panel-heading").click(function(e){ /*切换折叠指示图标*/ $(this).find("span").toggleClass("glyphicon-chevron-down"); $(this).find("span").toggleClass("glyphicon-chevron-up"); }); }); </script> </body> </html>
总结
以上所述是小编给大家介绍的Bootstrap实现可折叠分组侧边导航菜单，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: