js点击显示全部

在JavaScript中实现“点击显示全部”的功能，通常涉及到DOM操作和事件处理。以下是一个基础的概念解释和相关示例代码：

基础概念

DOM（Document Object Model）：HTML文档的编程接口，允许脚本动态地访问和更新文档的内容、结构和样式。
事件处理：通过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>点击显示全部</title>
    <style>
        #content {
            display: none;
        }
    </style>
</head>
<body>
    <button id="showMoreBtn">显示全部</button>
    <p id="content">这是全部内容，初始状态下部分内容被隐藏。</p>

    <script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

document.getElementById('showMoreBtn').addEventListener('click', function() {
    var content = document.getElementById('content');
    if (content.style.display === 'none' || content.style.display === '') {
        content.style.display = 'block';
        this.textContent = '收起';
    } else {
        content.style.display = 'none';
        this.textContent = '显示全部';
    }
});

解释

HTML部分：
- 一个按钮#showMoreBtn用于触发显示/隐藏内容的操作。
- 一个段落#content包含要显示的内容，初始状态下通过CSS设置为隐藏（display: none）。

JavaScript部分：
- 使用document.getElementById获取按钮和段落元素。
- 为按钮添加点击事件监听器，当按钮被点击时执行回调函数。
- 在回调函数中，检查段落的display样式属性：
  - 如果是none或空字符串（初始状态），则将其设置为block以显示内容，并将按钮文本改为“收起”。
  - 如果是block，则将其设置为none以隐藏内容，并将按钮文本改为“显示全部”。