jQuery slideToggle本地正常 线上站点移动端导航菜单不生效

问题现象 #

• 站点内多处jQuery slideToggle 交互效果运行正常，仅移动端导航菜单的slideToggle功能异常
• 功能在本地开发环境可正常触发，部署到线上站点后点击无任何响应
• 线上站点地址：https://toolcurve.com

相关代码 #

HTML结构 #

<ul class="menu">
    <li class="item"><a href="">Main menu link</a>
        <img src="drop-chev.svg" class="sub-menu-drop">
        <ul class="dropdown">
            <li class="sub-item"><a href=""></a>Sub Menu Link</li>
            <li class="sub-item"><a href=""></a>Sub Menu Link</li>
        </ul>
    </li>
    <li class="item"><a href="">Main menu link</a>
    <img src="drop-chev.svg" class="sub-menu-drop">
        <ul class="dropdown">
            <li class="sub-item"><a href=""></a>Sub Menu Link</li>
            <li class="sub-item"><a href=""></a>Sub Menu Link</li>
        </ul>
    </li>
</ul>

原有JS实现 #

$(function(){
    if (window.innerWidth < 768){
        var $submenu = $(".dropdown");
        $(".sub-menu-drop").on("click", function(e){
            $(this).next($submenu).slideToggle();
        });
    }
});

问题原因与修复方案 #

代码本身的逻辑缺陷 #

1. 宽度判断逻辑死板：当前代码仅在页面DOM初始加载时执行一次宽度判断，如果用户在PC宽度（≥768px）打开页面后再缩放窗口到移动端宽度，点击事件根本不会被绑定；部分移动端浏览器初始计算innerWidth时会计入侧边滚动条宽度，也可能触发误判导致事件不绑定。
2. 元素选择逻辑错误：$(this).next($submenu)写法存在问题，$submenu变量预先选中了页面所有.dropdown元素，next()方法传入全量元素集合时匹配逻辑不符合预期，无法精准定位当前按钮对应的下拉菜单。
3. HTML结构不规范：子菜单项的文本写在了<a>标签闭合标签外部，会导致点击区域异常，建议调整为<a href="">Sub Menu Link</a>的标准结构。

线上环境特有问题排查点 #

• 先打开浏览器开发者工具切到移动端模拟器，查看点击时Console面板是否有JS报错，同时在Elements面板选中.sub-menu-drop元素，检查Event Listeners里是否成功绑定了click事件
• 检查是否有元素层级遮挡：给.sub-menu-drop临时加上position: relative; z-index: 9999测试，排除线上其他透明浮层元素遮挡导致点击事件无法触发的问题
• 检查JS加载顺序：确认jQuery库在该段业务代码之前加载，避免出现$ is not defined报错
• 如果线上开启了构建压缩、CSS Modules类名混淆，确认.sub-menu-drop、.dropdown两个类名没有被编译改写，否则jQuery选择器无法匹配到对应元素

修复后参考代码 #

// 用事件委托绑定事件，避免动态渲染元素、初始判断逻辑导致的事件不生效问题
$(document).on('click', '.sub-menu-drop', function(e) {
    // 点击时再判断宽度，适配窗口缩放场景
    if (window.innerWidth >= 768) return;
    e.preventDefault();
    // 直接匹配当前元素相邻的下拉菜单，加stop防止多次点击动画队列堆积
    $(this).next('.dropdown').stop(true, true).slideToggle();
});

// 窗口切回PC宽度时重置下拉菜单状态
$(window).on('resize', function() {
    if (window.innerWidth >= 768) {
        $('.dropdown').removeAttr('style');
    }
});

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