基础 - CSS样式实现显示和隐藏特效功能详解
2023年10月15日
基础 - CSS样式实现显示和隐藏特效功能详解
1. 前言
CSS是前端开发中的一种样式表语言，可以用来控制网页的样式。今天介绍一下CSS样式如何实现隐藏（收起）和显示（展示）特效功能，可以使网页内容更加简洁易读，也更符合用户的操作习惯。而CSS可以通过伪类和动画来实现这种效果。
2. HTML编写
在HTML中添加隐藏和显示按钮，可以使用div标签来实现。
<html>
<body>
<div class="box">
<div class="sx" onclick="typeClick()">展示/收起</div>
<div id="type_hs" class="zt">
<div class="pz">
<div class="wz">字体大小</div>
<div class="input-btn">
<span>-</span>
<input type="text" id="inpV" readonly="readonly" :value="fontZ">
<span>+</span>
</div>
</div>
</div>
</div>
</body>
</html>
接下来，利用CSS来设置展开和收起的效果了。
3. CSS编写
.box .zt{
max-height: 0;
overflow: hidden;
transition: max-height .5s ease;
}
.box .cont {
max-height: 300px;
}
上面的代码中，先将css中zt样式的max-height设置为0px，overflow设置为hidden，这样展开的内容就不会显示。然后设置一个动画效果，transition属性控制了动画的过渡效果；而css中cont样式设置为300px。
4. JS编写
function typeClick(){
let dy = document.getElementById("type_hs").getAttribute("class");
if(dy == 'zt'){
document.getElementById("type_hs").setAttribute("class","zt cont");
}else{
document.getElementById("type_hs").setAttribute("class","zt");
}
}
上面的代码中，根据type_hs的ID值获取class样式，如果是zt样式，设置为zt cont样式，反之设置为zt样式。
5. 展示效果
至此，就成功地实现了CSS样式实现隐藏和显示特效。通过这种方式，可以轻松地为网页添加更加优雅的交互效果，如下图所示：
效果地址参考：https://www.yoodb.com，右侧功能设置按钮。
