大家好~ 珊妹這不是轉了前端嗎，前端插件真是數不勝數呢，所以珊妹打算以後會在閒暇時間來利用常用的插件來寫一些大家平時可能會用到的例子來供大家參考，代碼一定不是最優的，但儘可能是可用的，所以有幸遇到大神，還望多多提點一二~
下面我們來說今天的功能，利用bootstrap插件完成面板摺疊嵌入表格：
首先下載bootstrap，這都不用說了，珊妹這裏下載的是bootstrap3版本，下載鏈接：https://v3.bootcss.com/
大家還要下載個jquery.min.js文件，可以去官網下載；
然後解壓後在當前目錄新建一個html文件，把下面代碼粘進去保存後雙擊文件就可看到結果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="./jquery.min.js"></script>
<script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<style>
.panel-heading{
cursor: pointer;
}
</style>
</head>
<body>
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading" id="fold" data-toggle="collapse" data-target="#table">
<span class="glyphicon glyphicon-triangle-right"></span>
人員名單</div>
<!-- Table -->
<div class="collapse" id="table">
<table class="table">
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
<tr>
<td>珊珊美眉</td>
<td>18</td>
<td>女</td>
</tr>
</table>
</div>
</div>
<script>
$("#fold").click(function(){
if($(this).find("span").hasClass("glyphicon-triangle-right")){
$(this).find("span").removeClass("glyphicon-triangle-right");
$(this).find("span").addClass("glyphicon-triangle-bottom");
}else{
$(this).find("span").removeClass("glyphicon-triangle-bottom");
$(this).find("span").addClass("glyphicon-triangle-right");
}
})
</script>
</body>
</html>