1.截图
2.代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!--这里用的cdn, 加载需要联网,可换本地 bootstrap.min.css-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--同上-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<style>
.window{width: 500px;height:400px; overflow-y:scroll;}
.window::-webkit-scrollbar{width:0px}/**webkit内核浏览器中有效(Chrome,Safari)**/
.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;}
</style>
</head>
<body>
<div class="window panel panel-default">
<div class="panel-heading">任务栏</div>
<div class="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">
<ul class="list-group">
<li class="list-group-item">
<!-- 利用data-target指定URL,可实现跳转-->
<button class="menu-item-left" data-target="path.html">
<span style="font-size: 16px;">分组项1-1</span>
<span class="label label-default">done</span>
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span style="font-size: 16px;">分组项1-1 </span>
<span class="label label-danger">New</span>
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span style="font-size: 16px;">分组项1-2</span>
<span class="glyphicon glyphicon-lock"></span>
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span style="font-size: 16px;">分组项1-2</span>
<span class="glyphicon glyphicon-lock"></span>
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span style="font-size: 16px;">分组项1-2</span>
<span class="glyphicon glyphicon-lock"></span>
</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">
<!-- 利用data-target指定URL -->
<button class="menu-item-left" data-target="test2.html">
<span style="font-size: 16px;">分组项2-1</span>
<span class="glyphicon glyphicon-lock"></span>
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span style="font-size: 16px;">分组项2-2</span>
<span class="glyphicon glyphicon-lock"></span>
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span style="font-size: 16px;">分组项2-3</span>
<span class="glyphicon glyphicon-lock"></span>
</button>
</li>
<li class="list-group-item">
<button class="menu-item-left">
<span style="font-size: 16px;">分组项2-4</span>
<span class="glyphicon glyphicon-lock"></span>
</button>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function(){
$(".panel-heading").click(function(e){
/*切换折叠指示图标*/
$(this).find("span").toggleClass("glyphicon-chevron-down");
$(this).find("span").toggleClass("glyphicon-chevron-up");
//点击元素的id
let id=e.currentTarget.id;
if(id==='collapseListGroupHeading1'){
$('#collapseListGroup1').toggleClass("in");
}else if(id==='collapseListGroupHeading2'){
$('#collapseListGroup2').toggleClass("in");
}
});
$(".list-group-item").click(function(e){
console.log(e);
alert("做一些事");
})
});
</script>
</body>
</html>