1. 事先说明
事先说明，此代码比较简短所以并没有美化，所以css需要自己再补一些。
另外，我比较菜。。刚进入前端，只能用vue、avue和element做一点公司的crud，勿喷
2. 做法过程
bootstrap折叠
主要使用的是上面链接的功能。
代码：
<div>
<!-- 侧边栏标签页 -->
<ul class="nav nav-pills nav-stacked">
<!-- 侧边栏选项 -->
<li role="presentation" class="active">
<!-- 选项控制data-target对应的显隐 -->
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" data-toggle="collapse" data-target="#list">商品管理</a>
<!-- 隐藏的详细菜单 -->
<ul id="list" class="collapse in">
<li>
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
操作一
</a>
</li>
<li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >操作二</a></li>
</ul>
</li>
<li role="presentation"><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Profile</a></li>
<li role="presentation"><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Messages</a></li>
</ul>
</div>
应该都能看懂
引用了bootstrap3 参考了bootstrap3中文文档
算是很简短了，主要利用菜鸟教程上面写的折叠将ul折叠起来了，通过点击控制折叠与否。
data-target要对应ul的id 此处我也不懂，应该是类似vue中的 :data 绑定吧
贴一下全部代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<!-- css -->
<link rel="stylesheet" type="text/css" href="admin.css" target="_blank" rel="external nofollow" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" target="_blank" rel="external nofollow" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" target="_blank" rel="external nofollow" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<title>
E-SHOP
</title>
</head>
<body class="loginBgColor">
<div>
<!-- 侧边栏标签页 -->
<ul class="nav nav-pills nav-stacked">
<!-- 侧边栏选项 -->
<li role="presentation" class="active">
<!-- 选项控制data-target对应的显隐 -->
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" data-toggle="collapse" data-target="#list">商品管理</a>
<!-- 隐藏的详细菜单 -->
<ul id="list" class="collapse in">
<li class="active">
<a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
操作一
</a>
</li>
<li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >操作二</a></li>
</ul>
</li>
<li role="presentation"><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Profile</a></li>
<li role="presentation"><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Messages</a></li>
</ul>
</div>
<script type="text/javascript">
</script>
</body>
</html>
实验的时候可以把我引入的自己的css去掉，在这个页面中我只在body处加了一个background-color。