html里怎么实现多个文字折叠

在HTML中实现多个文字折叠效果，我们可以使用纯CSS或结合JavaScript来实现，这里，我将为大家介绍一种使用CSS和JavaScript结合的方法，让你轻松实现多个文字折叠效果。

我们需要在HTML文档中添加折叠内容的结构，以下是示例代码：

Markup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字折叠示例</title>
    <style>
        /* 在这里添加CSS样式 */
    </style>
</head>
<body>
    <div class="container">
        <div class="fold-content">
            <h3 class="fold-title">标题一</h3>
            <div class="fold-text">这里是折叠的内容一，点击标题展开或收起。</div>
        </div>
        <div class="fold-content">
            <h3 class="fold-title">标题二</h3>
            <div class="fold-text">这里是折叠的内容二，点击标题展开或收起。</div>
        </div>
        <!-- 更多折叠内容 -->
    </div>
    <script>
        // 在这里添加JavaScript代码
    </script>
</body>
</html>

我们在<style>标签中添加CSS样式：

CSS

.container {
    width: 80%;
    margin: 0 auto;
}
.fold-content {
    border: 1px solid #ccc;
    margin-bottom: 10px;
}
.fold-title {
    cursor: pointer;
    padding: 10px;
    background-color: #f5f5f5;
}
.fold-text {
    display: none;
    padding: 10px;
}

CSS样式为容器设置了宽度、边框和间距等基本样式，我们添加JavaScript代码来实现折叠效果：

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    var foldTitles = document.querySelectorAll('.fold-title');
    foldTitles.forEach(function(title) {
        title.addEventListener('click', function() {
            var foldText = this.nextElementSibling;
            if (foldText.style.display === 'none') {
                foldText.style.display = 'block';
            } else {
                foldText.style.display = 'none';
            }
        });
    });
});