使用CSS实现手风琴效果

能者

要实现手风琴效果，可以使用CSS的伪类和过渡属性来实现。下面是一个简单的例子:

[mw_shl_code=html,true]
<!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>
[/mw_shl_code]

这个例子中，我们使用了一个包含多个面板的父容器 `.accordion`。每个面板由一个标题和内容组成，点击标题时触发切换效果。

CSS样式相关的类包括:

- `.panel`:面板元素的样式
- `.panel.active`:当前激活（展开）的面板元素的样式
- `.panel .content`:面板内容的样式

通过给面板元素添加 `active` 类，并设置相应的样式，可以实现展开/折叠的效果。

JavaScript 代码部分为点击事件的处理，当点击面板时，通过添加或移除 `active` 类来切换面板的展开状态，并根据内容的高度来控制动画过渡效果。

你可以根据需要调整样式和动画的细节，使其适应你的项目。