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 的影响。