如何实现 CSS 可折叠区块默认关闭并动态切换按钮文本-html教程-PHP中文网

本文介绍如何让 html 中的可折叠区块在页面加载时默认处于关闭状态，并在用户点击时自动切换标题文字（如“open collapsible” ↔ “close collapsible”），全程仅用原生 javascript 和 css，无需框架。

本文介绍如何让 html 中的可折叠区块在页面加载时默认处于关闭状态，并在用户点击时自动切换标题文字（如“open collapsible” ↔ “close collapsible”），全程仅用原生 javascript 和 css，无需框架。

要实现一个默认关闭、点击切换展开/收起状态、同时动态更新触发按钮文本的可折叠区块，关键在于三步协同：HTML 结构语义化、CSS 初始隐藏控制、以及 JavaScript 状态驱动逻辑。下面将逐一说明并提供完整可运行方案。

✅ 步骤一：确保内容默认隐藏（关键！）

原代码中未设置 .collapsible_content 的初始 display: none，导致页面加载时内容直接显示。解决方法是在 DOM 加载后、事件绑定前，主动为每个折叠内容设为隐藏：

const coll = document.getElementsByClassName("collapsible");
for (let i = 0; i <blockquote><p>⚠️ 注意：此操作必须在 addEventListener 之前执行，否则可能被后续脚本覆盖；也不建议仅靠 CSS 设置 display: none（因可能被其他样式干扰），JS 主动控制更可靠。</p></blockquote><h3>✅ 步骤二：统一事件逻辑，同步控制显示与文本</h3><p>原代码中存在两个独立的 click 监听器，且第二个监听器的判断逻辑有误（e.target.innerText == "Close Collapsible" 永远不会成立，因为初始文本是 “Open Collapsible”，且未更新）。应合并为单个监听器，在切换 display 的同时更新按钮文本：</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
														src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
													<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
												</div>
												<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div><pre class="brush:php;toolbar:false;">for (let i = 0; i <p>✅ 推荐使用 textContent 而非 innerText：语义更准确、性能更好、且规避潜在 XSS 风险（当文本含特殊字符时更稳定）。</p><h3>✅ 步骤三：优化结构与健壮性（可选但推荐）</h3>

添加 role="button" 和 tabindex="0"，提升可访问性（支持键盘 Enter/Space 触发）：
```
<div class="collapsible heading" role="button" tabindex="0">Open Collapsible</div>
```

为 .collapsible_content 添加 aria-expanded 属性，配合屏幕阅读器：

// 在 click 处理中同步更新
this.setAttribute("aria-expanded", content.style.display === "block");

? 完整精简示例（可直接运行）



  <meta charset="utf-8"><style>
    .collapsible { cursor: pointer; }
    .collapsible_content { margin: 10px 0; }
    /* 其他原有 CSS 保持不变 */
  </style><div class="centered">
    <div class="content">
      <div class="collapsible heading">Open Collapsible</div>
      <div class="collapsible_content">
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const coll = document.querySelectorAll('.collapsible');

      coll.forEach(el => {
        const content = el.nextElementSibling;
        // 初始化隐藏
        content.style.display = 'none';

        el.addEventListener('click', () => {
          if (content.style.display === 'block') {
            content.style.display = 'none';
            el.textContent = 'Open Collapsible';
          } else {
            content.style.display = 'block';
            el.textContent = 'Close Collapsible';
          }
        });
      });
    });
  </script>