近日开发一个后台，发现有展开收起的功能，css功力欠妥。委托媳妇大人写了一版展开收起的效果，纯的jquery+html的。特此收藏，方便后续进行持续使用！
效果如下：
展开效果：
jquery自行添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
* {
padding: 0;
margin: 0;
}
i,
em {
font-style: normal;
}
.fons18 {
font-size: 18px;
}
.fons16 {
font-size: 16px;
}
.fons14 {
font-size: 14px;
}
.fons12 {
font-size: 12px;
}
.fontc01 {
color: #333;
}
.fontc02 {
color: #666;
}
.fontc03 {
color: #999;
}
.fontc04 {
color: #3c8ebc;
}
.detail {
width: 80%;
margin: 20px auto;
line-height: 30px;
}
.detail .evaluate {
border-top: 1px #f1f1f1 dashed;
margin-top: 20px;
padding: 20px 0;
}
.detail .evaluate .head-e {
line-height: 22px;
}
.detail .evaluate .head-e img {
float: left;
margin-right: 12px;
width: 40px;
height: 40px;
border: 1px #eee solid;
border-radius: 40px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, .06);
}
.detail .evaluate .head-reply {
line-height: 18px;
margin-top: 10px;
background-color: #fbfbfb;
padding: 15px;
}
.detail .evaluate .head-reply img {
float: left;
margin-right: 12px;
display: block;
width: 36px;
height: 36px;
border: 1px #eee solid;
border-radius: 40px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, .06);
}
.detail .evaluate .head-reply span.content {
display: inline-block;
}
.detail .evaluate .head-reply td{
vertical-align: top;
}
.detail .evaluate .reply {
display: none
}
</style>
<div class="detail">
<div>
<div class="fons18 fontc01">都知道电脑怕热,那么电脑怕冷吗?</div>
<div class="fons16 fontc02">
可能很多网友会觉得奇怪，电脑怕热我们都知道。散热不好或许电脑配件温度过高会呈现死机蓝屏，或许是自动关机的状况。越冷不是散热状况越好吗？怎么会怕冷呢？那么今天小编就在这里给我们分析下电脑的配件当中那些会因为太冷而呈现故障吧！
</div>
<div class="fons14 fontc04">作者：张三</div>
</div>
<div class="evaluate">
<div class="head-e">
<img src="./head.jpg" alt="">
<span>陈晨lin <br> <i class="fontc03 fons12">2019-06-15</i></span>
</div>
<div class="fons14">
百度知道，赚钱的方法，<br>
一是，打开百度知道APP签到，但是签到每天只有0.1元<br>
二是，回答题目有财富值，也可以通过加入芝麻团队签到获取财富值，加入团队获得的会更多，财富值可以兑换礼品。<br>
三是，看视频，每天有0.2元<br>
四是，看直播答题，这个不限，有时直播分得多，有时少，一般是几毛钱，但是一天有很多直播，一场可以回答几次问题，所以坚持还是有一些红包的<br>
</div>
<div class="fontc04 fons14 click">点击查看回复</div>
<div class="reply">
<div class="head-reply">
<table>
<tr>
<td><img src="./head.jpg" alt=""></td>
<td>
<span class="fontc04 fons12">陈晨lin <i class="fontc03"> 2019-06-15</i></span><br>
<span class="fons14 fontc02 content">四是，看直播答题，这个不限，有时直播分得多，有时少，一般是几毛钱，但是一天有很多直播，一场可以回答几次问题，所以坚持还是有一些红包的~~~~</span>
</td>
</tr>
</table>
</div>
<div class="head-reply">
<table>
<tr>
<td><img src="./head.jpg" alt=""></td>
<td>
<span class="fontc04 fons12">陈晨lin <i class="fontc03"> 2019-06-15</i></span><br>
<span class="fons14 fontc02 content">谢谢~~~~</span>
</td>
</tr>
</table>
</div>
<div class="head-reply">
<table>
<tr>
<td><img src="./head.jpg" alt=""></td>
<td>
<span class="fontc04 fons12">陈晨lin <i class="fontc03"> 2019-06-15</i></span><br>
<span class="fons14 fontc02 content">谢谢~~~~</span>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="evaluate">
<div class="head-e">
<img src="./head.jpg" alt="">
<span>陈晨lin <br> <i class="fontc03 fons12">2019-06-15</i></span>
</div>
<div class="fons14">
百度知道，赚钱的方法，<br>
一是，打开百度知道APP签到，但是签到每天只有0.1元<br>
二是，回答题目有财富值，也可以通过加入芝麻团队签到获取财富值，加入团队获得的会更多，财富值可以兑换礼品。<br>
三是，看视频，每天有0.2元<br>
四是，看直播答题，这个不限，有时直播分得多，有时少，一般是几毛钱，但是一天有很多直播，一场可以回答几次问题，所以坚持还是有一些红包的<br>
</div>
<div class="fontc04 fons14 click">点击查看回复</div>
<div class="reply">
<div class="head-reply">
<table>
<tr>
<td><img src="./head.jpg" alt=""></td>
<td>
<span class="fontc04 fons12">陈晨lin <i class="fontc03"> 2019-06-15</i></span><br>
<span class="fons14 fontc02 content">谢谢~~~~</span>
</td>
</tr>
</table>
</div>
<div class="head-reply">
<table>
<tr>
<td><img src="./head.jpg" alt=""></td>
<td>
<span class="fontc04 fons12">陈晨lin <i class="fontc03"> 2019-06-15</i></span><br>
<span class="fons14 fontc02 content">谢谢~~~~</span>
</td>
</tr>
</table>
</div>
<div class="head-reply">
<table>
<tr>
<td><img src="./head.jpg" alt=""></td>
<td>
<span class="fontc04 fons12">陈晨lin <i class="fontc03"> 2019-06-15</i></span><br>
<span class="fons14 fontc02 content">谢谢~~~~</span>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<script src="./jquery-3.4.1.min.js"></script>
<script>
$(".evaluate").each(function () {
var _this = $(this)
_this.find(".click").click(function () {
if (_this.find(".reply").is(':hidden')) {
_this.find(".reply").show()
} else {
_this.find(".reply").hide()
}
})
})
</script>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
