js 实现收缩
使用 CSS 和 JavaScript 实现元素收缩
通过 JavaScript 动态修改元素的 height 或 max-height 属性，结合 CSS 过渡效果实现平滑收缩动画。以下示例通过点击按钮控制内容区域的展开/收缩：
// 获取DOM元素
const toggleBtn = document.getElementById('toggle-btn');
const content = document.getElementById('content');
// 初始状态标记
let isExpanded = true;
// 点击事件处理
toggleBtn.addEventListener('click', () => {
if (isExpanded) {
content.style.maxHeight = '0';
content.style.opacity = '0';
toggleBtn.textContent = '展开';
} else {
content.style.maxHeight = '500px'; // 设置为足够大的值
content.style.opacity = '1';
toggleBtn.textContent = '收缩';
}
isExpanded = !isExpanded;
});对应CSS样式：
#content {
max-height: 500px;
overflow: hidden;
transition: max-height 0.3s ease, opacity 0.3s ease;
opacity: 1;
}使用 classList 切换实现收缩
通过添加/移除CSS类的方式控制元素状态，保持JavaScript与样式的分离：
const toggleBtn = document.querySelector('.toggle-button');
const panel = document.querySelector('.collapsible-panel');
toggleBtn.addEventListener('click', () => {
panel.classList.toggle('collapsed');
});CSS定义收缩状态：
.collapsible-panel {
height: auto;
transition: height 0.4s ease;
overflow: hidden;
}
.collapsible-panel.collapsed {
height: 0;
}响应式内容高度的收缩
对于动态内容高度的情况，使用 scrollHeight 属性获取实际内容高度：
function toggleCollapse(element) {
const target = document.querySelector(element.getAttribute('data-target'));
if (target.style.height) {
target.style.height = null;
} else {
target.style.height = target.scrollHeight + 'px';
}
}HTML结构示例：
<button onclick="toggleCollapse(this)" data-target="#panel">切换</button>
<div id="panel" style="overflow: hidden; transition: height 0.3s;">
内容区域...
</div>多级嵌套收缩实现
对于复杂结构的收缩面板（如树形菜单），使用事件委托处理动态元素：
document.addEventListener('click', (e) => {
if (e.target.matches('.collapse-header')) {
const panel = e.target.nextElementSibling;
panel.style.height = panel.style.height ? null : panel.scrollHeight + 'px';
}
});配套CSS建议：
.collapse-panel {
height: 0;
overflow: hidden;
transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}注意事项
- 始终为收缩元素设置
overflow: hidden防止内容溢出 - 使用
max-height替代height可以避免固定高度计算问题 - 考虑添加
will-change: height属性优化动画性能 - 移动端设备可能需要添加
-webkit-overflow-scrolling: touch增强滚动体验
以上方法均可根据实际需求组合使用，通过调整过渡时间和缓动函数可获得不同的视觉效果。对于复杂场景，建议使用现成的UI库如Bootstrap的Collapse组件或jQuery UI的Accordion组件。
