展开 折叠插件
2022-07-27 本文已影响0人
醋留香
image.png
css部分
<style>
.wrap{
width: 100%;
background-color: lightblue;
border: 2px solid black;
margin: 0 auto;
margin-bottom: 15px;
}
.test{
width: 100%;
border: 1px solid black;
background-color: azure;
border-radius: 5px;
overflow: hidden;
box-sizing: border-box;
}
.content{
border: 2px solid red;
transition: all 0.4s;
padding-bottom: 10px;
}
.foot{
width: 100%;
text-align: center;
border: 1px solid red;
background-color: aqua;
position: relative;
bottom: 0px;
z-index: 999;
}
.sx{
height: 100px;
}
</style>
html 部分
<div class="wrap">
<div class="test ">
<div class="content sx">
<div class="neirong">
1. 工作需求1<br />
2. 工作需求2<br />
3. 工作需求3<br />
4. 工作需求4<br />
5. 工作需求5<br />
6. 工作需求6<br />
7. 工作需求7<br />
8. 工作需求8<br />
9. 工作需求9<br />
10. 工作需求10<br />
</div>
</div>
<div class="foot" onclick="toggle_fn(this)">
展开
</div>
</div>
</div>
<div class="wrap">
......
</div>
<div class="wrap">
......
</div>
JS部分, 注意 , 需要引入 jquery
function toggle_fn(ele) {
var content = $(ele).parents(".test").find(".content")
var neirong = $(ele).parents(".test").find(".neirong")
if (content.hasClass("sx")) {
content.animate({
height: neirong.outerHeight() + "px"
} , 100 , "linear")
content.removeClass("sx")
$(ele).html("折叠")
} else {
content.animate({
height: 100 + "px"
} , 100 , "linear")
content.addClass("sx")
$(ele).html("展开")
}
}