html手风琴菜单

HTML手风琴菜单可以通过CSS和JavaScript实现。以下是一个简单的示例代码：

HTML:

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">菜单1</div>
    <div class="accordion-content">
      <p>这里是菜单1的内容。</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">菜单2</div>
    <div class="accordion-content">
      <p>这里是菜单2的内容。</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">菜单3</div>
    <div class="accordion-content">
      <p>这里是菜单3的内容。</p>
    </div>
  </div>
</div>

CSS:

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

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

.accordion-item.active .accordion-content {
  display: block;
}

JavaScript:

var accordionItems = document.querySelectorAll('.accordion-item');

for (var i = 0; i < accordionItems.length; i++) {
  accordionItems[i].addEventListener('click', function() {
    this.classList.toggle('active');
  });
}

这段代码会创建一个手风琴菜单，当菜单项被点击时，它们的内容会展开或折叠。