示例代码

将下面的代码复制到一个新的HTML文件中保存，然后在浏览器中打开即可，如下图。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多段文字折叠示例</title>
    <style>
        .content {
            display: none; /* 初始隐藏内容 */
            margin-top: 10px;
        }
        .toggle-button {
            cursor: pointer;
            color: blue;
            text-decoration: underline;
            margin-top: 5px;
        }
    </style>
</head>

<body>

    <h1>多段文字折叠示例</h1>

    <div>
        <h2>段落 1</h2>
        <p>这是段落 1 的内容。这是一些示范文字，用于展示折叠效果。</p>
        <span class="toggle-button" onclick="toggleContent('content1')">展开/折叠</span>
        <div class="content" id="content1">
            这是段落 1 的额外内容，可以被折叠和展开。
        </div>
    </div>

    <div>
        <h2>段落 2</h2>
        <p>这是段落 2 的内容。这是一些示范文字，用于展示折叠效果。</p>
        <span class="toggle-button" onclick="toggleContent('content2')">展开/折叠</span>
        <div class="content" id="content2">
            这是段落 2 的额外内容，可以被折叠和展开。
        </div>
    </div>

    <div>
        <h2>段落 3</h2>
        <p>这是段落 3 的内容。这是一些示范文字，用于展示折叠效果。</p>
        <span class="toggle-button" onclick="toggleContent('content3')">展开/折叠</span>
        <div class="content" id="content3">
            这是段落 3 的额外内容，可以被折叠和展开。
        </div>
    </div>

    <script>
        function toggleContent(contentId) {
            var content = document.getElementById(contentId);
            //切换内容的显示状态
            content.style.display = (content.style.display === 'block') ? 'none' : 'block';
        }
    </script>

</body>
</html>

您可以通过点击每个段落下的“展开/折叠”按钮，来显示或隐藏额外的内容段落，如下图。

代码说明

1、HTML结构

●使用多个 div 元素来包含每个段落及其内容。
●每个段落有一个标题和一个“展开/折叠”按钮，点击按钮会调用 toggleContent 函数。

2、CSS样式

●.content 类设置为 display: none; 以初始隐藏每段的额外内容。
●.toggle-button 类用于设置按钮的可点击样式。

3、JavaScript功能

●toggleContent 函数根据内容的当前显示状态切换其显示与隐藏。
●在 toggleContent 函数中，使用了三元运算符来检查内容的当前显示状态。如果内容是可见的（display: block），则将其隐藏（display: none）；如果内容是隐藏的，则将其显示（display: block）。

✅来源：十一张

✅标题：在HTML网页中实现多个段落的折叠和展开

✅地址：https://www.11zhang.com/1446.html

温馨提示：本文最后更新于2025-01-25 20:49:55，某些文章具有时效性，若有错误或已失效，请在文末评论留言