js点击显示全部内容

在JavaScript中实现点击按钮显示全部内容的功能，通常涉及到DOM操作和事件监听。以下是一个简单的示例，展示了如何实现这一功能：

基础概念

DOM操作：Document Object Model（文档对象模型），允许JavaScript与HTML文档进行交互。
事件监听：通过添加事件监听器来响应用户的操作，如点击按钮。

示例代码

假设我们有一个段落元素，初始状态下只显示部分内容，点击按钮后显示全部内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示全部内容</title>
    <style>
        .content {
            max-height: 50px; /* 初始高度 */
            overflow: hidden;
            transition: max-height 0.5s ease;
        }
    </style>
</head>
<body>
    <div class="content" id="content">
        这是一个很长的段落，初始状态下只显示部分内容。点击按钮后，将显示全部内容。
    </div>
    <button id="showMoreBtn">显示全部</button>

    <script>
        document.getElementById('showMoreBtn').addEventListener('click', function() {
            var content = document.getElementById('content');
            if (content.style.maxHeight) {
                content.style.maxHeight = null;
            } else {
                content.style.maxHeight = content.scrollHeight + "px";
            }
        });
    </script>
</body>
</html>