手风琴菜单

手风琴菜单是一种常见的网站菜单风格，它可以在有限的空间内显示大量的菜单选项，给用户带来更好的操作体验。本文介绍一种基于 CSS 的手风琴菜单实现方法。

HTML 结构

以下是手风琴菜单的基本 HTML 结构：

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">Header1</div>
    <div class="accordion-body">Content1</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Header2</div>
    <div class="accordion-body">Content2</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Header3</div>
    <div class="accordion-body">Content3</div>
  </div>
</div>

其中，.accordion 是手风琴菜单的容器，.accordion-item 是每个手风琴项，.accordion-header 是手风琴项的标题，.accordion-body 是手风琴项的内容。

基础 CSS 样式

以下是手风琴菜单的基础 CSS 样式：

.accordion {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

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

.accordion-header {
  background-color: #f1f1f1;
  padding: 10px;
  cursor: pointer;
}

.accordion-body {
  padding: 10px;
  display: none;
}

手风琴菜单容器的宽度建议设置为固定值或最大宽度，以保证在不同设备上具有一致的表现。.accordion-item 的边框可以根据需要进行调整。.accordion-header 应该具有相同的背景色，并且设置一个光标，以表明它是可以被点击的。.accordion-body 应该设置为 display: none，初始状态下不显示。

JS 行为

以下是手风琴菜单的 JS 实现：

var accordions = document.querySelectorAll('.accordion');

for (var i = 0; i < accordions.length; i++) {
  accordions[i].addEventListener('click', function() {
    var accordionItem = this.querySelector('.accordion-item');

    if (accordionItem.classList.contains('active')) {
      accordionItem.classList.remove('active');
    } else {
      for (var j = 0; j < accordions.length; j++) {
        accordions[j].querySelector('.accordion-item').classList.remove('active');
      }
      accordionItem.classList.add('active');
    }
  });
}

根据上面的 HTML 结构，使用 querySelectorAll 获取到所有的 .accordion 容器，使用 addEventListener 为每个容器绑定点击事件。当点击了一个手风琴项时，需要判断该项是否处于激活状态，如果是则取消激活状态，否则需要取消其他所有手风琴项的激活状态并激活当前项。可以通过给 .accordion-item 添加 active 类，通过 CSS 样式来实现激活状态的效果。

完整代码

完整的手风琴菜单实现代码如下：

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">Header1</div>
    <div class="accordion-body">Content1</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Header2</div>
    <div class="accordion-body">Content2</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Header3</div>
    <div class="accordion-body">Content3</div>
  </div>
</div>

<style>
  .accordion {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
  }

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

  .accordion-header {
    background-color: #f1f1f1;
    padding: 10px;
    cursor: pointer;
  }

  .accordion-body {
    padding: 10px;
    display: none;
  }

  .accordion-item.active .accordion-body {
    display: block;
  }
</style>

<script>
  var accordions = document.querySelectorAll('.accordion');

  for (var i = 0; i < accordions.length; i++) {
    accordions[i].addEventListener('click', function() {
      var accordionItem = this.querySelector('.accordion-item');

      if (accordionItem.classList.contains('active')) {
        accordionItem.classList.remove('active');
      } else {
        for (var j = 0; j < accordions.length; j++) {
          accordions[j].querySelector('.accordion-item').classList.remove('active');
        }
        accordionItem.classList.add('active');
      }
    });
  }
</script>

总结

通过上文的介绍，我们可以学习到如何用基础的 HTML、CSS 和 JS 实现手风琴菜单。通过不断的学习和实践，我们可以进一步掌握更高级的技术来优化手风琴菜单的性能和功能。