js 实现折叠
实现折叠效果的方法
在JavaScript中实现折叠效果通常涉及动态控制元素的显示与隐藏，以下是几种常见方法：
使用 classList 切换显示状态
通过添加或移除CSS类来控制元素的显示与隐藏：
const toggleButton = document.getElementById('toggleButton');
const content = document.getElementById('content');
toggleButton.addEventListener('click', () => {
content.classList.toggle('hidden');
});CSS样式：
.hidden {
display: none;
}直接操作 style 属性
通过修改元素的display或height属性实现动画效果：
const toggleButton = document.getElementById('toggleButton');
const content = document.getElementById('content');
toggleButton.addEventListener('click', () => {
if (content.style.display === 'none') {
content.style.display = 'block';
} else {
content.style.display = 'none';
}
});使用 CSS Transition 实现平滑动画
结合CSS过渡效果实现平滑展开/折叠：
const toggleButton = document.getElementById('toggleButton');
const content = document.getElementById('content');
toggleButton.addEventListener('click', () => {
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + 'px';
}
});CSS样式：
.content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}使用 jQuery 的 toggle 方法
如果项目中已引入jQuery库，可简化代码：
$('#toggleButton').click(function() {
$('#content').toggle();
});使用 details 和 summary 标签（纯HTML方案）
无需JavaScript的浏览器原生折叠方案：
<details>
<summary>点击折叠/展开</summary>
<div>隐藏内容</div>
</details>注意事项
- 动态内容需在展开时重新计算高度（如
scrollHeight） - 移动端考虑添加
touch事件支持 - 无障碍访问需添加
aria-expanded等属性
以上方法可根据具体需求选择，CSS Transition方案适合需要动画效果的场景，而纯class切换则最简单高效。
