当前位置：首页 > 文章列表 > 文章 > 前端 > HTML5折叠面板制作教程手风琴组件详解

HTML5折叠面板制作教程手风琴组件详解

2025-10-30 13:45:47 0浏览收藏

1. 基础HTML结构

使用div容器包裹每一个面板项，每个项包含一个标题（用于点击展开/收起）和一个内容区域。

示例代码：


  
    
    
      这里是第一项的内容，可以是任意HTML内容。
    
  

  
    
    
      这是第二项的详细信息。

2. 使用CSS美化样式

为面板添加边框、圆角、过渡动画等视觉效果，让交互更自然。

.accordion {
  width: 100%;
  max-width: 600px;
  margin: 20px auto;
  font-family: Arial, sans-serif;
}

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

.accordion-header {
  width: 100%;
  text-align: left;
  padding: 15px;
  background-color: #f7f7f7;
  cursor: pointer;
  border: none;
  outline: none;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

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

.accordion-content {
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  background-color: #fff;
}

.accordion-content p {
  padding: 15px;
  margin: 0;
}

.accordion-item.active .accordion-content {
  max-height: 200px;
  padding: 15px 0;
}

3. 添加JavaScript实现交互

通过JavaScript控制点击标题时切换面板的展开与收起状态。

document.querySelectorAll('.accordion-header').forEach(button => {
  button.addEventListener('click', function() {
    const item = this.parentElement;
    item.classList.toggle('active');
  });
});

这段脚本会为每个标题绑定点击事件，通过切换active类来控制内容区域的显示与隐藏。