css写一个手风琴列表
时间: 2023-10-25 16:15:49 浏览: 35
可以的,可以使用CSS3中的伪类选择器来实现手风琴效果。以下是一个简单的实现示例:
HTML代码:
```
<ul class="accordion">
<li>
<h2>第一项</h2>
<div>
<p>第一项内容</p>
</div>
</li>
<li>
<h2>第二项</h2>
<div>
<p>第二项内容</p>
</div>
</li>
<li>
<h2>第三项</h2>
<div>
<p>第三项内容</p>
</div>
</li>
</ul>
```
CSS代码:
```
.accordion {
list-style: none;
margin: 0;
padding: 0;
}
.accordion li {
position: relative;
margin-bottom: 10px;
}
.accordion h2 {
position: relative;
display: block;
background-color: #eee;
padding: 10px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease-in-out;
}
.accordion h2::after {
content: "+";
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
font-weight: bold;
transition: transform 0.3s ease-in-out;
}
.accordion li.active h2::after {
transform: rotate(45deg);
}
.accordion div {
position: relative;
overflow: hidden;
background-color: #fff;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: height 0.3s ease-in-out;
}
.accordion li.active div {
height: auto;
}
```
JS代码:
```
<script>
var accordion = document.querySelectorAll(".accordion li");
for (var i = 0; i < accordion.length; i++) {
accordion[i].addEventListener("click", function() {
var active = document.querySelector(".accordion li.active");
if (active) {
active.classList.remove("active");
}
this.classList.add("active");
});
}
</script>
```
这个示例中,我们利用了CSS3中的伪类选择器和过渡效果来实现手风琴效果。同时,我们也用一些JavaScript代码来控制手风琴的展开和折叠。