好看的垂直手风琴菜单列表代码

这是一个基于HTML、CSS和JavaScript的简单垂直手风琴菜单列表代码，你可以根据自己的需要进行修改和定制。

HTML代码：

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">Item 1</div>
    <div class="accordion-content">This is item 1 content.</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Item 2</div>
    <div class="accordion-content">This is item 2 content.</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Item 3</div>
    <div class="accordion-content">This is item 3 content.</div>
  </div>
</div>

CSS代码：

.accordion {
  display: flex;
  flex-direction: column;
}

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

.accordion-item:last-child {
  margin-bottom: 0;
}

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

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

.accordion-content {
  background-color: #fff;
  padding: 10px;
  display: none;
}

JavaScript代码：

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

accordionItems.forEach(item => {
  const header = item.querySelector('.accordion-header');
  const content = item.querySelector('.accordion-content');

  header.addEventListener('click', () => {
    // toggle active class
    item.classList.toggle('active');

    // toggle content
    if (item.classList.contains('active')) {
      content.style.display = 'block';
    } else {
      content.style.display = 'none';
    }
  });
});

这段代码实现了基本的手风琴效果，点击标题会展开或关闭对应的内容。如果需要更多的样式和功能，可以根据自己的需求进行修改和扩展。