css 点击折叠 |hover的时候淡出 css

/*用于隐藏或显示折叠内容的样式类*/
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
/*默认折叠内容的样式*/
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
点击折叠效果
点击下面的按钮来展开或折叠内容：
点击偶展开内容
这是一个简单的折叠内容示例。
//折叠按钮的点击事件
var collapsible = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i< collapsible.length; i++) {
collapsible[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}

以上代码中，大家定义了两个样式类，分别代表折叠内容的样式（content）和用于隐藏或显示折叠内容的样式类（collapsible）。大家使用JavaScript来实现折叠按钮的点击事件，当按钮被点击时，大家会添加或删除一个名为“active”的样式，来改变折叠按钮的展开与折叠状态。

这是CSS的点击折叠效果的实现方式，你可以根据自己的需求进行修改和扩展，并将其运用到你的网页中。