jQueryslideToggle()展开/折叠状态实时判断技巧

本文介绍如何实时判断jQuery `slideToggle()`方法的展开或折叠状态。`slideToggle()`本身并不提供状态反馈，文章巧妙地利用CSS类名作为状态标识：展开时添加特定类名，折叠时移除。通过监听点击事件，结合`hasClass()`和`addClass()`/`removeClass()`方法，即可实时获取并打印元素的展开或折叠状态到控制台，实现简洁高效的状态监测。 此方法适用于需要实时监控`slideToggle()`动画状态的场景，避免复杂逻辑。

实时监测jQuery slideToggle() 的展开/折叠状态

$.slideToggle() 方法本身无法直接提供实时展开/折叠状态。本文介绍一种巧妙的方法来解决这个问题。

核心思路：

利用 CSS 类名作为状态标识。当元素展开时，添加特定类名；折叠时，移除该类名。

代码实现：

let statusClass = "expanded"; // 定义状态类名

$(".menu-parent").click(function() {
    const $ul = $(this).next("ul");
    $ul.slideToggle();
    if ($ul.hasClass(statusClass)) {
        $ul.removeClass(statusClass);
        console.log("折叠");
    } else {
        $ul.addClass(statusClass);
        console.log("展开");
    }
});

使用方法示例：

点击切换

点击以上链接，将触发相邻

元素的 slideToggle() 动画，并通过检查 expanded 类名来实时打印展开或折叠状态到控制台。 此方法简洁高效，避免了不必要的复杂逻辑。

今天关于《jQueryslideToggle()展开/折叠状态实时判断技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！