js 多行文本折叠

在 JavaScript 中实现多行文本折叠通常涉及到对 HTML 元素的操作，结合 CSS 样式来控制文本的显示与隐藏。以下是相关的基础概念、优势、类型、应用场景以及实现方式：

基础概念

多行文本折叠是指在一个网页中，用户可以点击某个按钮或链接来展开或折叠长文本内容。这种方式有助于提高页面的可读性和用户体验，尤其是在内容较多的页面上。

优势

提升用户体验：用户可以根据需要选择查看或隐藏内容，避免页面过于拥挤。
优化页面布局：通过折叠内容，可以更好地管理页面空间，尤其是在移动设备上。
信息层次分明：重要的信息可以优先显示，次要信息可以通过折叠隐藏。

类型

简单折叠：仅显示部分内容，点击后展开全部内容。
逐步折叠：内容分段折叠，用户可以逐段展开查看。
动画效果折叠：在展开和折叠时添加动画效果，提高视觉体验。

应用场景

FAQ 页面：常见问题解答，用户点击问题后展开答案。
文章阅读：长篇文章分段显示，用户可以逐段阅读。
表格信息：表格中某些列内容较多，用户可以选择展开查看。

实现方式

以下是一个简单的示例代码，展示如何使用 JavaScript 和 CSS 实现多行文本折叠：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Collapse Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="collapse-container">
        <p>这是可见的文本内容。</p>
        <span class="collapse-button">展开更多</span>
        <div class="collapse-content" id="collapseContent">
            <p>这是隐藏的文本内容，用户点击“展开更多”后会显示这部分内容。</p>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

.collapse-content {
    display: none;
}

.collapse-content.show {
    display: block;
}

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', function() {
    const button = document.querySelector('.collapse-button');
    const content = document.getElementById('collapseContent');

    button.addEventListener('click', function() {
        content.classList.toggle('show');
        if (content.classList.contains('show')) {
            button.textContent = '收起';
        } else {
            button.textContent = '展开更多';
        }
    });
});