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。