js 实现折叠
实现折叠效果的几种方法
在JavaScript中实现折叠效果可以通过多种方式完成，以下是几种常见的方法：
使用CSS和JavaScript切换类
通过添加或移除控制折叠的CSS类，结合classList属性实现动画效果。
<style>
.content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.content.expanded {
max-height: 1000px;
}
</style>
<button id="toggleBtn">Toggle</button>
<div id="content" class="content">
<!-- 折叠内容 -->
</div>
<script>
const toggleBtn = document.getElementById('toggleBtn');
const content = document.getElementById('content');
toggleBtn.addEventListener('click', () => {
content.classList.toggle('expanded');
});
</script>使用jQuery的slideToggle
如果项目中已引入jQuery，可以直接使用slideToggle()方法快速实现。
$('#toggleBtn').click(function() {
$('#content').slideToggle();
});动态计算高度实现平滑动画
通过JavaScript动态计算内容高度，实现更精确的折叠控制。
const toggleBtn = document.getElementById('toggleBtn');
const content = document.getElementById('content');
toggleBtn.addEventListener('click', () => {
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + 'px';
}
});使用details和summary标签（原生HTML方案）
HTML5提供了原生折叠组件，无需JavaScript即可实现基本功能。
<details>
<summary>Toggle Content</summary>
<div>折叠内容</div>
</details>使用第三方库
对于复杂需求，可以考虑使用专门处理动画的库如Animate.css或GSAP。
// 使用Animate.css示例
content.classList.add('animate__animated', 'animate__fadeIn');每种方法都有其适用场景，简单交互可使用原生HTML方案，需要精细控制动画则推荐纯JavaScript实现，已有jQuery环境的项目可以优先使用jQuery方法。
