Bootstrap实现可折叠分组侧边导航菜单
程序员文章站
2022-04-15 20:05:30
效果图：
源码：
...
效果图：
源码：
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>表格</title>
<meta name="keywords" content="侧边导航菜单(可分组折叠)">
<meta name="description" content="侧边导航菜单(可分组折叠)" />
<meta name="handheldfriendly" content="true" />
<link rel="shortcut icon" href="img/favicon.ico" rel="external nofollow" >
<!-- bootstrap3.3.5 css -->
<link href="css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
<!-- 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>
</head>
<body>
<div class="row">
<div class="col-md-2">
<div class="panel-group table-responsive" role="tablist">
<div class="panel panel-primary leftmenu">
<!-- 利用data-target指定要折叠的分组列表 -->
<div class="panel-heading" id="collapselistgroupheading1" data-toggle="collapse" data-target="#collapselistgroup1" role="tab" >
<h4 class="panel-title">
分组1
<span class="glyphicon glyphicon-chevron-up right"></span>
</h4>
</div>
<!-- .panel-collapse和.collapse标明折叠元素 .in表示要显示出来 -->
<div id="collapselistgroup1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="collapselistgroupheading1">
<ul class="list-group">
<li class="list-group-item">
<!-- 利用data-target指定url -->
<button class="menu-item-left" data-target="test2.html">
<span class="glyphicon glyphicon-triangle-right"></span>分组项1-1
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分组项1-2
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分组项1-3
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分组项1-4
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分组项1-5
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分组项1-6
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分组项1-7
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分组项1-8
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分组项1-9
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分组项1-10
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分组项1-11
</button>
</li>
</ul>
</div>
</div><!--panel end-->
<div class="panel panel-primary leftmenu">
<div class="panel-heading" id="collapselistgroupheading2" data-toggle="collapse" data-target="#collapselistgroup2" role="tab" >
<h4 class="panel-title">
分组2
<span class="glyphicon glyphicon-chevron-down right"></span>
</h4>
</div>
<div id="collapselistgroup2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapselistgroupheading2">
<ul class="list-group">
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分组项2-1
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分组项2-2
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分组项2-3
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span class="glyphicon glyphicon-triangle-right"></span>分组项2-4
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-10">
内容
</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实现可折叠分组侧边导航菜单，希望对大家有所帮助
上一篇： 入侵某一游戏交易网