大家好~ 珊妹这不是转了前端吗，前端插件真是数不胜数呢，所以珊妹打算以后会在闲暇时间来利用常用的插件来写一些大家平时可能会用到的例子来供大家参考，代码一定不是最优的，但尽可能是可用的，所以有幸遇到大神，还望多多提点一二~
下面我们来说今天的功能，利用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>
扫一扫
1776
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
