使用const与setTimeout实现菜单动画的jQuery技术问题咨询

原代码存在的问题 #

• 语法错误：if(dropdown).hasClass("active") 括号位置错误，正确写法应为 if(dropdown.hasClass("active"))
• 变量名大小写错误：contentwrapper.toggleClass("active") 中变量名拼写错误，原定义的变量是contentWrapper，大小写不一致会导致无法找到目标元素
• 未处理遗留超时：没有保存超时ID，无法在下拉菜单关闭时取消之前设置的延迟。如果快速多次点击按钮，之前未执行的超时任务会继续触发，导致content-wrapper的状态混乱
• 冗余逻辑：关闭菜单时用setTimeout(..., 0)完全没必要，直接执行类切换即可，且当前写法并没有实现需求中“取消延迟”的核心逻辑

正确实现方案 #

要满足需求，核心是保存超时ID并在每次点击时先清除之前的超时，避免遗留的延迟任务干扰当前状态，再根据下拉菜单的状态执行对应操作：

// 下拉菜单动画逻辑
$(document).ready(function(){
    const navbar = $(".mobile-navbar");
    const contentWrapper = $(".content-wrapper");
    const menuBtn = $(".menu-button-container");
    const dropdown = $(".nav-dropdown-menu");
    // 保存超时ID，用于取消未执行的延迟任务
    let contentTimeout;

    menuBtn.click(function(){
        // 先清除之前的超时，避免多次点击后状态混乱
        clearTimeout(contentTimeout);
        
        // 切换navbar和下拉菜单的active类
        navbar.toggleClass("active");
        dropdown.toggleClass("active");

        // 根据下拉菜单状态处理content-wrapper
        if(dropdown.hasClass("active")){
            // 下拉菜单展开时，延迟300ms切换类
            contentTimeout = setTimeout(function(){
                contentWrapper.toggleClass("active");
            }, 300);
        } else {
            // 下拉菜单收起时，立即切换类
            contentWrapper.toggleClass("active");
        }
     });
});

关键说明 #

1. 新增contentTimeout变量保存超时ID，每次点击按钮时先调用clearTimeout(contentTimeout)，确保之前的延迟任务被取消，不会干扰当前操作
2. 修复了语法和变量名错误，保证代码能正常执行
3. 收起菜单时直接执行toggleClass，去掉冗余的setTimeout(..., 0)，完全符合“取消延迟立即切换”的需求

内容的提问来源于stack exchange，提问作者Mathew Palmer