基础 CSS 手风琴菜单基础

手风琴菜单（Accordion Menu）是一种具有交互性的 UI 元素，能够在有限的空间内展示大量的内容。在本文中，我们将会学习如何通过基础 CSS 实现手风琴菜单。

HTML 结构

手风琴菜单的 HTML 结构至少需要一个父级容器和多个子容器，每个子容器代表一个手风琴菜单项。

<div class="accordion">
  <div class="accordion-item">
    <h2 class="accordion-header">手风琴菜单项 1</h2>
    <div class="accordion-content">
      <p>手风琴菜单项 1 的内容</p>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">手风琴菜单项 2</h2>
    <div class="accordion-content">
      <p>手风琴菜单项 2 的内容</p>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">手风琴菜单项 3</h2>
    <div class="accordion-content">
      <p>手风琴菜单项 3 的内容</p>
    </div>
  </div>
</div>

CSS 样式

接下来，我们需要为手风琴菜单的每个容器设置一些 CSS 样式。首先，我们需要将所有的菜单项的内容隐藏，只有激活的菜单项才会出现。我们可以通过设置 display: none 来实现。

.accordion-content {
  display: none;
}

然后，我们需要为激活的菜单项设置样式。为了让它看起来像手风琴，我们需要将它的高度设置为自动，宽度设置为 100%，并增加一个过渡效果。

.accordion-item.active .accordion-content {
  display: block;
  height: auto;
  width: 100%;
  transition: height .3s ease-in-out;
}

最后，我们需要为每个菜单项的标题添加鼠标事件监听器，以便在点击时切换其激活状态和相应的内容。

.accordion-header {
  cursor: pointer;
}

.accordion-header:focus,
.accordion-header:hover {
  outline: none;
}

.accordion-item {
  border-bottom: 1px solid #ccc;
}

.accordion-item:last-of-type {
  border-bottom: none;
}

JavaScript 事件监听器

现在，我们需要为每个菜单项的标题添加事件监听器。当菜单项标题被点击时，我们将其激活，并隐藏其他菜单项的内容。

const accordionHeaders = document.querySelectorAll('.accordion-header');

accordionHeaders.forEach(header => {
  header.addEventListener('click', () => {
    const activeItem = document.querySelector('.accordion-item.active');

    if (activeItem && activeItem !== header.parentNode) {
      activeItem.classList.remove('active');
      activeItem.querySelector('.accordion-content').style.height = '0';
    }

    header.parentNode.classList.toggle('active');

    const content = header.nextElementSibling;
    if (header.parentNode.classList.contains('active')) {
      content.style.height = content.scrollHeight + 'px';
    } else {
      content.style.height = '0';
    }
  });
});

完整代码

<div class="accordion">
  <div class="accordion-item">
    <h2 class="accordion-header">手风琴菜单项 1</h2>
    <div class="accordion-content">
      <p>手风琴菜单项 1 的内容</p>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">手风琴菜单项 2</h2>
    <div class="accordion-content">
      <p>手风琴菜单项 2 的内容</p>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">手风琴菜单项 3</h2>
    <div class="accordion-content">
      <p>手风琴菜单项 3 的内容</p>
    </div>
  </div>
</div>

<style>
  .accordion-content {
    display: none;
    overflow: hidden;
  }

  .accordion-item.active .accordion-content {
    display: block;
    height: auto;
    width: 100%;
    transition: height .3s ease-in-out;
  }

  .accordion-header {
    cursor: pointer;
  }

  .accordion-header:focus,
  .accordion-header:hover {
    outline: none;
  }

  .accordion-item {
    border-bottom: 1px solid #ccc;
  }

  .accordion-item:last-of-type {
    border-bottom: none;
  }
</style>

<script>
  const accordionHeaders = document.querySelectorAll('.accordion-header');

  accordionHeaders.forEach(header => {
    header.addEventListener('click', () => {
      const activeItem = document.querySelector('.accordion-item.active');

      if (activeItem && activeItem !== header.parentNode) {
        activeItem.classList.remove('active');
        activeItem.querySelector('.accordion-content').style.height = '0';
      }

      header.parentNode.classList.toggle('active');

      const content = header.nextElementSibling;
      if (header.parentNode.classList.contains('active')) {
        content.style.height = content.scrollHeight + 'px';
      } else {
        content.style.height = '0';
      }
    });
  });
</script>

使用上述代码，即可实现基础 CSS 手风琴菜单的功能。用户点击标题即可展示对应的内容。如果您想要实现其他自定义的样式，可以在此基础上进行修改。