如何将点击展开/折叠文本的初始状态设置为隐藏？
2026-5-21
嘿，我来帮你搞定这个默认收起的折叠文本功能！下面是完整的可运行代码，还做了一些体验优化，同时会给你拆解关键细节：
实现默认隐藏的点击展开/折叠文本
先上完整代码，直接复制就能用：
<html lang="en"> <head> <meta charset="utf-8"> <style> div#expand { width: 500px; display: none; /* 核心：初始状态设置为隐藏 */ margin-top: 10px; padding: 10px; border: 1px solid #eee; background-color: #f9f9f9; } .toggle-btn { padding: 5px 10px; cursor: pointer; } </style> </head> <body> <button class="toggle-btn" onclick="toggleExpand()">展开内容</button> <div id="expand"> 这里是默认隐藏的文本内容，点击按钮可以展开或者收起我啦！你可以在这里放任何你想隐藏的段落、列表甚至其他HTML元素哦。 </div> <script> function toggleExpand() { const expandDiv = document.getElementById('expand'); const btn = document.querySelector('.toggle-btn'); // 注意：CSS设置的display:none，初始时element.style.display是空字符串，所以要同时判断 if (expandDiv.style.display === 'none' || expandDiv.style.display === '') { expandDiv.style.display = 'block'; btn.textContent = '收起内容'; } else { expandDiv.style.display = 'none'; btn.textContent = '展开内容'; } } </script> </body> </html>
关键细节拆解：
- 初始隐藏的核心：直接在CSS里给
#expand设置display: none;，这比用JS在页面加载时设置更高效，页面渲染完成就直接隐藏，不会出现一闪而过的内容。 - 完善的切换逻辑：把你原来的
show()函数改成了toggleExpand()，不仅能展开，还能折叠，同时按钮文字会跟着切换，用户一眼就知道当前操作是什么。 - 兼容初始状态：因为初始的
display:none是通过CSS设置的，不是内联样式，所以JS第一次获取expandDiv.style.display会是空字符串，因此判断条件里要加上|| expandDiv.style.display === ''，否则第一次点击可能没反应。 - 样式优化：给折叠区域和按钮加了一点基础样式，让界面更友好，你可以根据自己的需求修改这些样式。
内容的提问来源于stack exchange，提问作者Buster Caldwell
