HTML手风琴菜单实现教程

CSS样式： 设置手风琴容器和项的基本样式，隐藏内容区域，并定义展开时的样式。可以使用height: 0; overflow: hidden;来隐藏内容，然后通过JavaScript改变height值来实现展开动画。

.accordion {
  width: 300px;
}

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

.accordion-header {
  background-color: #f0f0f0;
  padding: 10px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
}

.accordion-content {
  padding: 10px;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-out; /* 添加过渡效果 */
}

.accordion-item.active .accordion-content {
  height: auto; /* 或者设置一个合适的高度值 */
}

JavaScript交互： 编写JavaScript代码，监听标题的点击事件，切换对应内容区域的显示状态。可以通过添加或移除CSS类（例如active）来控制展开/折叠效果。

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

accordionItems.forEach(item => {
  const header = item.querySelector('.accordion-header');
  header.addEventListener('click', () => {
    // 关闭其他已展开的项 (可选)
    accordionItems.forEach(otherItem => {
      if (otherItem !== item && otherItem.classList.contains('active')) {
        otherItem.classList.remove('active');
        otherItem.querySelector('.accordion-content').style.height = '0'; // Reset height
      }
    });

    item.classList.toggle('active');
    const content = item.querySelector('.accordion-content');
    if (item.classList.contains('active')) {
        content.style.height = content.scrollHeight + 'px'; // Use scrollHeight for dynamic content
    } else {
        content.style.height = '0';
    }
  });
});