HTML折叠新闻网页版本号如何实现？-网页设计-锦华智联科技

纯HTML/CSS/JavaScript实现 - 这是一个完全独立的、轻量级的解决方案，适合快速部署和简单使用。
使用Bootstrap框架实现 - 这是一个更现代化、功能更丰富的解决方案，提供了更好的样式和交互体验，适合更专业的项目。

纯HTML/CSS/JavaScript实现

这个版本不依赖任何外部框架,代码完全自包含，易于理解和修改。

（图片来源网络，侵删）

功能特点：

每条新闻都是一个可折叠的区块。
清晰的版本号显示（如 v1.2.1）。
发布日期和作者信息。
平滑的展开/收起动画。
响应式设计,在手机上也能良好显示。

代码实现

您可以直接将以下代码复制到一个 .html 文件中，然后用浏览器打开即可看到效果。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">折叠新闻 - 版本更新日志</title>
    <style>
        /* 基础样式重置和页面布局 */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.6;
            background-color: #f4f7f6;
            color: #333;
            margin: 0;
            padding: 20px;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
            color: #2c3e50;
            border-bottom: 2px solid #e0e0e0;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
        /* 新闻条目样式 */
        .news-item {
            border: 1px solid #e0e0e0;
            border-radius: 5px;
            margin-bottom: 15px;
            overflow: hidden; /* 关键：用于折叠动画的容器裁剪 */
        }
        .news-header {
            padding: 15px 20px;
            background-color: #fdfdfd;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background-color 0.3s ease;
        }
        .news-header:hover {
            background-color: #f0f0f0;
        }
        .news-title {
            font-size: 1.1em;
            font-weight: 600;
            color: #34495e;
            margin: 0;
        }
        .news-meta {
            display: flex;
            align-items: center;
            gap: 15px; /* 版本号、日期、作者之间的间距 */
            font-size: 0.9em;
            color: #7f8c8d;
        }
        .version-badge {
            background-color: #3498db;
            color: white;
            padding: 2px 8px;
            border-radius: 12px; /* 椭圆形徽章 */
            font-size: 0.85em;
            font-weight: 500;
        }
        /* 折叠图标 */
        .toggle-icon {
            font-size: 1.2em;
            transition: transform 0.3s ease; /* 图标旋转动画 */
        }
        /* 新闻内容样式 */
        .news-content {
            padding: 0 20px;
            max-height: 0; /* 初始高度为0，实现折叠 */
            overflow: hidden; /* 隐藏超出部分 */
            transition: max-height 0.4s ease-out, padding 0.4s ease-out; /* 高度和内边距的平滑过渡 */
            background-color: #fff;
        }
        .news-content p {
            margin: 15px 0;
            color: #555;
        }
        /* 当新闻条目被展开时 */
        .news-item.active .news-content {
            max-height: 500px; /* 设置一个足够大的值以容纳内容 */
            padding: 0 20px 15px 20px; /* 展开时添加底部内边距 */
        }
        .news-item.active .toggle-icon {
            transform: rotate(180deg); /* 图标旋转180度 */
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>产品更新日志</h1>
        <!-- 新闻条目 1 -->
        <div class="news-item">
            <div class="news-header" onclick="toggleNews(this)">
                <div>
                    <h2 class="news-title">全新用户界面发布，带来更流畅的体验</h2>
                    <div class="news-meta">
                        <span class="version-badge">v2.1.0</span>
                        <span>发布日期: 2025-10-27</span>
                        <span>作者: 张三</span>
                    </div>
                </div>
                <span class="toggle-icon">▼</span>
            </div>
            <div class="news-content">
                <p>我们很高兴地宣布，全新的用户界面（UI）正式发布！这次更新旨在为您提供更直观、更高效的交互体验。</p>
                <p><strong>主要更新内容：</strong></p>
                <ul style="padding-left: 20px;">
                    <li>全新的仪表盘设计，信息展示更清晰。</li>
                    <li>优化了深色模式，支持更多自定义选项。</li>
                    <li>重新设计了导航栏，操作路径更短。</li>
                    <li>整体性能提升了约20%，页面加载速度更快。</li>
                </ul>
            </div>
        </div>
        <!-- 新闻条目 2 -->
        <div class="news-item">
            <div class="news-header" onclick="toggleNews(this)">
                <div>
                    <h2 class="news-title">修复关键性Bug，提升系统稳定性</h2>
                    <div class="news-meta">
                        <span class="version-badge">v2.0.5</span>
                        <span>发布日期: 2025-10-15</span>
                        <span>作者: 李四</span>
                    </div>
                </div>
                <span class="toggle-icon">▼</span>
            </div>
            <div class="news-content">
                <p>本次更新主要修复了在特定网络环境下数据同步失败的问题，并修复了已知的几个安全漏洞，强烈建议所有用户立即更新。</p>
                <p><strong>修复详情：</strong></p>
                <ul style="padding-left: 20px;">
                    <li>修复了因网络波动导致的数据丢失问题。</li>
                    <li>修复了在旧版浏览器上可能出现的样式错乱。</li>
                    <li>增强了后端API的安全性，防止未授权访问。</li>
                </ul>
            </div>
        </div>
        <!-- 新闻条目 3 -->
        <div class="news-item">
            <div class="news-header" onclick="toggleNews(this)">
                <div>
                    <h2 class="news-title">引入智能搜索功能，让您更快找到所需信息</h2>
                    <div class="news-meta">
                        <span class="version-badge">v2.0.0</span>
                        <span>发布日期: 2025-09-01</span>
                        <span>作者: 王五</span>
                    </div>
                </div>
                <span class="toggle-icon">▼</span>
            </div>
            <div class="news-content">
                <p>我们引入了全新的智能搜索引擎，它不仅能帮您快速找到文档，还能理解您的自然语言查询，提供更精准的搜索结果。</p>
                <p><strong>新功能亮点：</strong></p>
                <ul style="padding-left: 20px;">
                    <li>支持模糊搜索和关键词联想。</li>
                    <li>搜索结果支持按相关性、日期、类型排序。</li>
                    <li>可以直接在搜索结果中预览内容片段。</li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        // 切换新闻条目展开/收起状态的函数
        function toggleNews(header) {
            // 找到当前点击的header所在的新闻条目 (news-item)
            const newsItem = header.parentElement;
            // 切换 'active' 类，如果存在则移除，不存在则添加。
            // 这是切换状态的现代、简洁方法。
            newsItem.classList.toggle('active');
            // 另一种更传统的写法 (if/else) 也可以，但上面的 toggle() 更优雅
            /*
            if (newsItem.classList.contains('active')) {
                newsItem.classList.remove('active');
            } else {
                newsItem.classList.add('active');
            }
            */
        }
    </script>
</body>
</html>

使用Bootstrap框架实现

这个版本使用了 Bootstrap 5，一个流行的前端框架，它能让你用更少的代码实现更美观、功能更强大的界面，并且自带了折叠组件（Accordion）。

功能特点：

使用 Bootstrap 的手风琴（Accordion）组件，专业且易于维护。
版本号、日期等信息通过 Bootstrap 的徽章（Badge）组件展示。
自带响应式布局和丰富的工具类。
代码更简洁,组件化思想。

代码实现

注意： 这个版本需要从 CDN 引入 Bootstrap 的 CSS 和 JavaScript 文件。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">折叠新闻 - Bootstrap版本</title>
    <!-- 1. 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* 自定义样式，可以覆盖或补充 Bootstrap 的默认样式 */
        body {
            background-color: #f8f9fa;
            padding-top: 40px;
            padding-bottom: 40px;
        }
        .container {
            max-width: 800px;
        }
        .accordion-button:not(.collapsed) {
            color: #0d6efd;
            background-color: #e7f1ff;
        }
        .version-badge {
            background-color: #0d6efd; /* 使用 Bootstrap 的蓝色 */
        }
        .news-meta {
            font-size: 0.875rem; /* 稍微小一点的字体 */
            color: #6c757d; /* Bootstrap 的次要文本颜色 */
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="mb-4 text-center">产品更新日志</h1>
        <!-- 2. 使用 Bootstrap 的 Accordion 组件 -->
        <div class="accordion" id="newsAccordion">
            <!-- 新闻条目 1 -->
            <div class="accordion-item mb-3">
                <h2 class="accordion-header">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <div class="w-100 text-start">
                            <h5 class="mb-1">全新用户界面发布，带来更流畅的体验</h5>
                            <div class="news-meta d-flex justify-content-between align-items-center">
                                <span class="version-badge text-white px-2 py-1 rounded">v2.1.0</span>
                                <span>发布日期: 2025-10-27 | 作者: 张三</span>
                            </div>
                        </div>
                    </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#newsAccordion">
                    <div class="accordion-body">
                        <p>我们很高兴地宣布，全新的用户界面（UI）正式发布！这次更新旨在为您提供更直观、更高效的交互体验。</p>
                        <p><strong>主要更新内容：</strong></p>
                        <ul>
                            <li>全新的仪表盘设计，信息展示更清晰。</li>
                            <li>优化了深色模式，支持更多自定义选项。</li>
                            <li>重新设计了导航栏，操作路径更短。</li>
                            <li>整体性能提升了约20%，页面加载速度更快。</li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 新闻条目 2 -->
            <div class="accordion-item mb-3">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        <div class="w-100 text-start">
                            <h5 class="mb-1">修复关键性Bug，提升系统稳定性</h5>
                            <div class="news-meta d-flex justify-content-between align-items-center">
                                <span class="version-badge text-white px-2 py-1 rounded">v2.0.5</span>
                                <span>发布日期: 2025-10-15 | 作者: 李四</span>
                            </div>
                        </div>
                    </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#newsAccordion">
                    <div class="accordion-body">
                        <p>本次更新主要修复了在特定网络环境下数据同步失败的问题，并修复了已知的几个安全漏洞，强烈建议所有用户立即更新。</p>
                        <p><strong>修复详情：</strong></p>
                        <ul>
                            <li>修复了因网络波动导致的数据丢失问题。</li>
                            <li>修复了在旧版浏览器上可能出现的样式错乱。</li>
                            <li>增强了后端API的安全性，防止未授权访问。</li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 新闻条目 3 -->
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        <div class="w-100 text-start">
                            <h5 class="mb-1">引入智能搜索功能，让您更快找到所需信息</h5>
                            <div class="news-meta d-flex justify-content-between align-items-center">
                                <span class="version-badge text-white px-2 py-1 rounded">v2.0.0</span>
                                <span>发布日期: 2025-09-01 | 作者: 王五</span>
                            </div>
                        </div>
                    </button>
                </h2>
                <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#newsAccordion">
                    <div class="accordion-body">
                        <p>我们引入了全新的智能搜索引擎，它不仅能帮您快速找到文档，还能理解您的自然语言查询，提供更精准的搜索结果。</p>
                        <p><strong>新功能亮点：</strong></p>
                        <ul>
                            <li>支持模糊搜索和关键词联想。</li>
                            <li>搜索结果支持按相关性、日期、类型排序。</li>
                            <li>可以直接在搜索结果中预览内容片段。</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 3. 引入 Bootstrap JS (Popper.js 是 Bootstrap 5 的依赖) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

总结与如何选择

特性	版本一 (原生实现)	版本二 (Bootstrap实现)
依赖	无任何外部依赖	需要 Bootstrap CSS/JS 框架
代码量	相对较多，需要自己写样式和JS逻辑	代码简洁，组件化，易于维护
样式	自定义，灵活可控	现代、专业，但受限于框架样式
交互	需要手动编写JS	使用框架自带组件，功能稳定
学习成本	需要熟悉CSS和JS基础	需要了解Bootstrap的组件和类名
适用场景	简单项目、学习目的、追求轻量级	专业项目、快速开发、追求一致性和美观性

建议：

（图片来源网络，侵删）

如果您是初学者,或者项目非常简单，不希望引入外部库，版本一是很好的选择。
如果您希望快速构建一个功能完善、外观专业的网页，并且不介意引入一个成熟的框架，版本二是更高效、更推荐的选择。

（图片来源网络，侵删）