js 实现 slidetoggle
使用 jQuery 实现 SlideToggle
jQuery 提供了内置的 slideToggle() 方法，可以轻松实现元素的展开/收起动画效果。
// 点击按钮时切换元素显示状态
$("#toggleButton").click(function() {
$("#targetElement").slideToggle();
});使用纯 JavaScript 实现 SlideToggle
如果不依赖 jQuery，可以通过 CSS 过渡和 JavaScript 动态修改样式实现类似效果。
HTML 结构
<button id="toggleButton">Toggle</button>
<div id="targetElement" class="collapsible">
Content to be toggled...
</div>CSS 样式
.collapsible {
overflow: hidden;
transition: height 0.3s ease;
}JavaScript 逻辑
const toggleButton = document.getElementById("toggleButton");
const targetElement = document.getElementById("targetElement");
toggleButton.addEventListener("click", function() {
if (targetElement.style.height === "0px" || !targetElement.style.height) {
// 展开元素
targetElement.style.height = targetElement.scrollHeight + "px";
} else {
// 收起元素
targetElement.style.height = "0px";
}
});优化动画性能
使用 requestAnimationFrame 可以提升动画流畅度，尤其是在频繁触发的场景中。
const toggleElement = (element) => {
if (element.clientHeight === 0) {
element.style.height = "auto";
const endHeight = element.clientHeight;
element.style.height = "0px";
requestAnimationFrame(() => {
element.style.height = endHeight + "px";
});
} else {
element.style.height = "0px";
}
};支持动画回调
如果需要动画完成后执行某些操作，可以监听 transitionend 事件。
targetElement.addEventListener("transitionend", function() {
console.log("Slide animation completed");
});注意事项
- 确保目标元素初始状态明确（如
height: 0或height: auto）。 - 如果内容动态变化，需要在展开前重新计算
scrollHeight。 - 对于复杂布局，可能需要额外处理
padding和margin的影响。
