HTML5网页如何制作折叠面板 HTML5网页手风琴组件的创建教程

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

HTML5网页如何制作折叠面板 HTML5网页手风琴组件的创建教程

2025-11-14

浏览次数：次

返回列表

使用HTML、CSS和J*aScript可快速实现手风琴效果。1. 创建包含标题按钮和内容区域的面板结构；2. 用CSS设置样式与过渡动画；3. 通过J*aScript为标题绑定点击事件，切换active类控制展开收起；4. 可选优化包括单开模式、动态高度、图标提示和aria属性提升体验。

html5网页如何制作折叠面板 html5网页手风琴组件的创建教程

想要在HTML5网页中实现折叠面板（也叫手风棋组件），其实不需要复杂的代码。通过HTML、CSS和少量J*aScript就能轻松完成一个交互友好的手风琴效果。下面是一个简单实用的创建教程，适合初学者快速上手。

1. 基础HTML结构

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

示例代码：

<div class="accordion">
  <div class="accordion-item">
    <button class="accordion-header">第一项标题</button>
    <div class="accordion-content">
      <p>这里是第一项的内容，可以是任意HTML内容。</p>
    </div>
  </div>

  <div class="accordion-item">
    <button class="accordion-header">第二项标题</button>
    <div class="accordion-content">
      <p>这是第二项的详细信息。</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2294">
                            <img src="https://img.php.cn/upload/ai_manual/001/246/273/175712858367437.png" alt="ChatCut">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2294">ChatCut</a>
                            <p>AI视频剪辑工具</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="ChatCut">
                                <span>1086</span>
                            </div>
                        </div>
                        <a href="/ai/2294" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="ChatCut">
                        </a>
                    </div>
                
    </div>
  </div>
</div>

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. 添加J*aScript实现交互

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

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