首页 > 文章 > 前端

HTML折叠面板实现教程详解

时间：2026-01-18 16:44:51 436浏览收藏

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《HTML折叠面板开发实例教程》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

折叠面板通过点击标题展开或收起内容，示例包含HTML、CSS和JavaScript实现，支持多面板独立操作，适用于FAQ等场景，代码可直接运行并扩展。

html在线网页折叠面板 html在线UI组件开发实例

网页折叠面板（Accordion）是一种常见的UI组件，适用于展示分组内容，节省页面空间。下面是一个简单的HTML在线折叠面板实现示例，包含基础的HTML、CSS和JavaScript代码，可直接在浏览器中运行或用于在线UI组件开发参考。

1. 折叠面板功能说明

该折叠面板支持点击标题展开或收起对应的内容区域，多个面板项可独立操作。适用于FAQ、设置菜单、产品详情等场景。

2. 完整代码示例

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>折叠面板示例</title>
  <style>
    .accordion {
      max-width: 600px;
      margin: 20px auto;
      font-family: Arial, sans-serif;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    .accordion-item {
      background: #fff;
      border-bottom: 1px solid #ddd;
    }
    .accordion-header {
      padding: 16px 20px;
      background-color: #f7f7f7;
      cursor: pointer;
      font-weight: bold;
      font-size: 16px;
      user-select: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .accordion-header::after {
      content: '+';
      font-size: 18px;
      color: #555;
    }
    .accordion-header.active::after {
      content: '−';
    }
    .accordion-content {
      padding: 0;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease-out, padding 0.3s ease;
      background: #fdfdfd;
    }
    .accordion-content-inner {
      padding: 16px 20px;
      line-height: 1.6;
    }
    .accordion-item.active .accordion-content {
      max-height: 300px;
      padding: 16px 20px;
    }
  </style>
</head>
<body>
  <div class="accordion">
    <div class="accordion-item">
      <div class="accordion-header">什么是HTML？</div>
      <div class="accordion-content">
        <div class="accordion-content-inner">
          HTML（超文本标记语言）是构建网页的基础语言，用于定义页面结构。
        </div>
      </div>
    </div>

    <div class="accordion-item">
      <div class="accordion-header">CSS的作用是什么？</div>
      <div class="accordion-content">
        <div class="accordion-content-inner">
          CSS用于控制网页的样式和布局，如颜色、字体、间距等。
        </div>
      </div>
    </div>

    <div class="accordion-item">
      <div class="accordion-header">JavaScript能做什么？</div>
      <div class="accordion-content">
        <div class="accordion-content-inner">
          JavaScript为网页添加交互功能，比如响应点击、动态更新内容等。
        </div>
      </div>
    </div>
  </div>

  <script>
    document.querySelectorAll('.accordion-header').forEach(header => {
      header.addEventListener('click', function() {
        const item = this.parentElement;
        const isActive = item.classList.contains('active');

        // 关闭所有面板
        document.querySelectorAll('.accordion-item').forEach(el => {
          el.classList.remove('active');
        });

        // 展开当前项（如果之前未展开）
        if (!isActive) {
          item.classList.add('active');
        }
      });
    });
  </script>
</body>
</html>

3. 使用说明与扩展建议

此折叠面板使用原生JavaScript实现，不依赖任何框架，适合嵌入各类项目中。

修改.accordion-item可增加更多面板项
调整max-height适应更长内容
支持移动端点击操作，响应式设计良好
可封装为Web Component用于UI组件库开发

基本上就这些，简单实用，适合快速集成到在线UI组件系统中。

好了，本文到此结束，带大家了解了《HTML折叠面板实现教程详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！

前往漫画官网入口并下载 ➜

html在线运行