使用CSS实现手风琴效果
要实现手风琴效果，可以使用CSS的伪类和过渡属性来实现。下面是一个简单的例子:
<!DOCTYPE html>
<html>
<head>
<style>
.accordion {
overflow: hidden;
}
.accordion .panel {
background-color: #f9f9f9;
padding: 16px;
border: none;
border-bottom: 1px solid #ddd;
cursor: pointer;
transition: background-color 0.3s ease;
}
.accordion .panel:last-child {
border-bottom: none;
}
.accordion .panel.active {
background-color: #ddd;
}
.accordion .panel .content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.accordion .panel.active .content {
max-height: 500px; /* 修改为适当的值 */
}
</style>
</head>
<body>
<div class="accordion">
<div class="panel">
<h3>面板标题 1</h3>
<div class="content">
<p>面板内容 1</p>
</div>
</div>
<div class="panel">
<h3>面板标题 2</h3>
<div class="content">
<p>面板内容 2</p>
</div>
</div>
<div class="panel">
<h3>面板标题 3</h3>
<div class="content">
<p>面板内容 3</p>
</div>
</div>
</div>
<script>
var panels = document.getElementsByClassName("panel");
for (var i = 0; i < panels.length; i++) {
panels.addEventListener("click", function() {
this.classList.toggle("active");
var content = this.querySelector(".content");
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
</body>
</html>
这个例子中，我们使用了一个包含多个面板的父容器 `.accordion`。每个面板由一个标题和内容组成，点击标题时触发切换效果。
CSS样式相关的类包括:
- `.panel`:面板元素的样式
- `.panel.active`:当前激活（展开）的面板元素的样式
- `.panel .content`:面板内容的样式
通过给面板元素添加 `active` 类，并设置相应的样式，可以实现展开/折叠的效果。
JavaScript 代码部分为点击事件的处理，当点击面板时，通过添加或移除 `active` 类来切换面板的展开状态，并根据内容的高度来控制动画过渡效果。
你可以根据需要调整样式和动画的细节，使其适应你的项目。
页:
[1]