基础 CSS 手风琴

简介

手风琴是一种常用于网站中的交互控件，在不占用太多屏幕空间的情况下可以展示大量内容。本文将介绍如何使用基础 CSS 实现手风琴效果。

CSS 实现

先来看一下 HTML 结构：

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">第一项</div>
    <div class="accordion-content">第一项内容</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">第二项</div>
    <div class="accordion-content">第二项内容</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">第三项</div>
    <div class="accordion-content">第三项内容</div>
  </div>
</div>

.accordion 是最外层容器，每个 .accordion-item 是一个手风琴项。.accordion-header 是手风琴项的标题，.accordion-content 是手风琴项的内容。

接下来是 CSS 样式：

.accordion-header {
  cursor: pointer;
}

.accordion-header:hover {
  background-color: #ddd;
}

.accordion-content {
  height: 0;
  overflow: hidden;
  transition: height 0.2s ease-in-out;
}

.accordion-open .accordion-content {
  height: auto;
}

首先，.accordion-header 需要设置 cursor: pointer，让鼠标悬停时变成手型。

然后，给 .accordion-header 设置 :hover 伪类，使鼠标悬停时变色。

.accordion-content 需要设置初始高度为 0，以及 overflow: hidden 让内容超出部分被隐藏。

最后，通过 .accordion-open 类来控制展开状态下的高度为自动。

接下来编写 JavaScript：

const accordion = document.querySelector('.accordion');

accordion.addEventListener('click', (event) => {
  if (event.target.classList.contains('accordion-header')) {
    const item = event.target.parentNode;
    const isOpen = item.classList.contains('accordion-open');

    accordion.querySelectorAll('.accordion-item').forEach((item) => {
      item.classList.remove('accordion-open');
    });

    if (!isOpen) {
      item.classList.add('accordion-open');
    }
  }
});

当点击 .accordion 容器时，判断是否点击了手风琴项的标题，如果是则切换 accordion-open 类，控制手风琴项的展开与收起。

总结

通过以上代码，我们可以实现一个基础的 CSS 手风琴效果。当然，这只是一个简单的示例，开发者可以根据实际需求来进行定制，比如增加动画效果、支持多层级手风琴等。