非常简单的html+js网页折叠效果代码，复制就能用

编辑：祝先生 2025-03-22 09:38:53

字体切换

在网页的制作中，常常会遇到这样的问题，在内容可有可无，但又不能省略的时候，总希望它在不该出现的时候不出现，在该出现的时候出现，就如同折叠椅一样，需要的时候拉出来即坐，不要的时候折叠起来放在角落里不占位置，这就是网页折叠代码的形象比喻，下面就来一组复制既能用的代码，希望能帮到你。

本文通过HTML+CSS+JavaScript技术组合实现了一个响应式网页折叠效果。该方案包含可点击的折叠标题栏、平滑展开动画、旋转箭头指示状态等功能，并针对PC和移动端设备做了差异化样式适配。核心原理是通过CSS过渡动画控制内容区域高度，配合JavaScript动态切换类名实现交互效果，代码简洁且扩展性强。

一、HTML结构解析

代码主打一个简洁，其html也是非常简明，代码如下：

<div class="collapse-container">
    <div class="collapse-header" onclick="toggleCollapse()">
        <span id="toggleText">展开内容</span>
        <span class="arrow">▼</span>
    </div>
    <div class="collapse-content">
        <!-- 内容区域 -->
    </div>
</div>

层级结构：包含三级div容器：

collapse-container：整体容器，设置边框和基础样式

collapse-header：可点击的标题栏，绑定点击事件

collapse-content：折叠内容区域，初始状态为隐藏

交互元素：

onclick事件：绑定JavaScript点击函数

toggleText：动态显示"展开/折叠"状态文本

arrow：箭头图标，通过旋转指示状态

二、CSS样式设计

基础样式组：

.collapse-content {
    max-height: 0;          /* 初始高度为0 */
    overflow: hidden;       /* 隐藏溢出内容 */
    transition: max-height 0.3s ease-out; /* 高度过渡动画 */
}

.collapse-content.active {
    max-height: 200px;     /* 展开时最大高度 */
    padding: 15px;         /* 内容边距 */
}

动画原理：通过max-height属性过渡实现平滑展开效果（比直接设置height更安全）

状态切换：.active类控制展开状态，与JavaScript配合切换

交互反馈设计：

.collapse-header {
    cursor: pointer;        /* 手型光标提示可点击 */
    transition: background-color 0.3s; /* 背景色过渡 */
}

.arrow {
    transition: transform 0.3s; /* 箭头旋转动画 */
}
.rotate { transform: rotate(180deg); }

通过CSS过渡实现视觉反馈，主要实现两个效果。

1.标题栏背景色渐变

2.箭头180度旋转动画

三、JavaScript交互逻辑

function toggleCollapse() {
    const content = document.querySelector('.collapse-content');
    const arrow = document.querySelector('.arrow');
    const toggleText = document.getElementById('toggleText');
    
    content.classList.toggle('active');  // 切换内容区域显示
    arrow.classList.toggle('rotate');    // 切换箭头方向
    
    // 更新状态文本
    toggleText.textContent = content.classList.contains('active') 
        ? '折叠内容' : '展开内容';
}

核心方法：

classList.toggle()：动态切换CSS类（.active和.rotate）

contains()检测类存在状态

执行流程：

点击标题 → 切换内容区域高度 → 旋转箭头 → 更新按钮文字，以代码实例说明，首次打开为折叠状态，按键文字为“展开内容”，但是当用户展开内容窗口后，又会立刻更新为“折叠内容”，从而实现不同的效果与人性化的体验。

四、响应式适配方案

PC端样式（≥1200px）：

@media (min-width:1200px) {
    .collapse-content.active { max-height: 200px; }
    .collapse-header { font-size: 1em; }
}

移动端样式（≤1190px）：

@media (max-width: 1190px) {
    .collapse-content.active { max-height: 400px; }
    .collapse-header { font-size: 2em; }
}

为了适配不同的客户端面，这里简单的设计了两种，在CSS中使用了媒体查询，PC端最小宽度为1200像素，反之最大宽度在1190像素以下则被视为移动端。当然，如果要细分，还可以分为ipad和手机。

差异化设计：

文字大小：PC端使用1em的字号，而移动端则用2em大字号提升可读性，因为1em在移动端实在是太小了。

内容高度：移动端设置更大高度值适应竖屏显示

弹性布局：标题栏使用display: flex实现文字和右边的箭头自动对齐

五、扩展与优化建议

多实例支持：当前代码为单例模式，可通过document.querySelectorAll改为支持多个折叠面板

内容自适应：将固定max-height改为动态计算实际内容高度

无障碍优化：添加aria-expanded属性提升屏幕阅读器兼容性

动画增强：可组合使用opacity属性实现淡入淡出效果

该方案通过简洁的代码实现了主流的折叠效果，既适合新手学习CSS过渡动画与JavaScript DOM操作的基本原理，也可作为基础组件直接嵌入实际项目使用。

该项目简明快捷，所见即所得，复制即可使用，修改起来也是相当方便，整个实例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>html+js实现网页折叠效果</title>
    <style>
    /*共同样式*/
    .collapse-container {
            margin: 20px auto;
            border: 1px solid #ddd;
            border-radius: 5px;
            overflow: hidden;
            font-size: 16px; /* 新增基准字体 */
        }

        .collapse-header {
            padding: 15px;
            background-color: #f8f9fa;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background-color 0.3s;
        }

        .collapse-header:hover {
            background-color: #e9ecef;
        }

        .collapse-content {
            padding: 0;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
            overflow-y: auto;
            font-size: 0.9em; /* 内容字体稍小 */
        }

        .collapse-content.active {
            padding: 15px;
            transition: max-height 0.3s ease-in;
        }

        .arrow {
            transition: transform 0.3s;
            font-size: 1.2em; /* 箭头大小 */
        }

        .rotate {
            transform: rotate(180deg);
        }
   /* PC样式*/
    @media (min-width:1200px) {
    .collapse-container {
            max-width: 100%;/*文本窗口宽度调整*/
        }
        .collapse-content.active {
            max-height: 200px;/*文本窗口高度调整*/
        }
        .collapse-header {
            font-size: 1em; /* 相对单位 */
        }
        .collapse-container .collapse-content {
font-size: 1em;
}
    }
    /*移动端样式*/
      @media (max-width: 1190px) {
      .collapse-container {
            max-width: 100%;/*文本窗口宽度调整*/
        }
        .collapse-content.active {
            max-height: 400px;/*文本窗口高度调整*/
        }
     .collapse-header {
            font-size: 2em; /* 相对单位 */
        }
        .collapse-container .collapse-content {
font-size: 2em;
}
}
    }
    </style>
</head>
<body>
    <!-- 以下body内容保持不变 -->
    <div>
        <div onclick="toggleCollapse()">
            <span id="toggleText">展开内容</span>
            <span>▼</span>
        </div>
        <div>
            <p>这里是折叠的内容区域。你可以在这里添加任意HTML内容，比如文本、图片、列表等。</p>
            <p>内容1</p>
            <p>内容2</p>
            <p>内容3</p>
            <p>这个示例使用了CSS过渡效果来实现平滑的展开和折叠动画。</p>
            <div style="height: 1200px; padding: 20px; background: #f8f9fa;">
                <p>滚动测试内容...</p>
                <p>继续滚动测试内容...</p>
            </div>
            <hr>
            <p>本实例来自祝先生的博客，更多实例请访问<a href="http://www.zhu-sir.com/" target="_blank">www.zhu-sir.com</a></p>
        </div>
    </div>

    <script>
        function toggleCollapse() {
            const content = document.querySelector('.collapse-content');
            const arrow = document.querySelector('.arrow');
            const toggleText = document.getElementById('toggleText');
            
            content.classList.toggle('active');
            arrow.classList.toggle('rotate');
            
            if (content.classList.contains('active')) {
                toggleText.textContent = '折叠内容';
            } else {
                toggleText.textContent = '展开内容';
            }
        }
    </script>
</body>
</html>

点击运行

你可能想看：

网页设计必备：html、js、php、asp以及带进度条跳转页面的代码

php实现txt纯文本文件转html网页文件代码

常用网页设计html特殊符号转义字符编码查询对照表

js兼容各种浏览器点击复制代码

利用记事本编写html代码和word实现A4信笺纸（信签纸）电子版的两种设计法

网页设计的配色与代码编码查询表

1.5V单只电池就能点亮LED灯的低成本逆变电路图

div加CSS实现简单表格的制作方法

超级简单而又实用的逆变器电路与实物焊接图

解决按键精灵在excel中使用组合键Ctrl+C首次复制没有内容