html气色手风琴效果
时间: 2023-07-05 07:05:51 浏览: 61
HTML 手风琴效果可以通过 CSS 实现。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>手风琴效果</title>
<style>
.container {
width: 500px;
margin: 0 auto;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
</body>
</html>
```
在这个示例中,我们创建了一个容器 `.container`,内部有三个按钮 `.accordion` 和三个面板 `.panel`。点击按钮时,面板会展开或折叠。CSS 中使用了过渡效果,让切换更加平滑。JavaScript 代码用于给按钮添加点击事件,以切换面板的显示状态。