jQuery使用toggle切换子菜单时 子菜单内a href链接点击失效

问题核心原因 #

• 原有事件绑定的选择器范围覆盖过广：$(".parent a")会选中所有带parent类的列表项下，所有嵌套层级里的全部a标签——既包括专门用来触发菜单展开的父级a，也包括子菜单内部本来要做页面跳转的普通a标签
• 绑定的点击事件末尾写了return false，在jQuery的事件规则中，这句代码会同时执行两个操作：屏蔽a标签的默认跳转行为、阻断事件冒泡。所有被这个选择器选中的a标签，不管本身有没有有效跳转目标，默认的跳转行为都会被强制拦截，直接导致链接点击失效
• 之前尝试用.parent a调整选择器的思路存在偏差：没有划清“菜单触发元素”和“普通跳转链接”的边界，让本该被放行的普通链接也落到了拦截逻辑的覆盖范围内

修正方案 #

1. 收窄事件绑定的选择器边界：把原来的$(".parent a")调整为$("li.parent > a")——这个选择器只会选中class为parent的列表项下的直接子级a标签，完全不会选中嵌套在子菜单容器内部的其他普通链接
2. 保留原有菜单展开/收起的核心逻辑，不需要修改子菜单切换、同级菜单折叠的判断代码
3. 子菜单内的普通链接因为不在事件绑定的选择器范围内，不会被拦截默认跳转行为，点击即可正常跳转至目标站点

修正后的可运行JS代码 #

$(function () {
    $(".submenu").hide();
    // 调整选择器，仅绑定菜单触发器的点击事件
    $("li.parent > a").click(function (e) {
        var elems = $(this).closest('li');
        elems.siblings('li').find('ul').hide();
        if (elems.find('.submenu').length) {
            $(".submenu:first", elems).toggle();
        }
        // 绑定对象本身是无跳转目标的菜单触发器，保留return false不影响功能
        return false;
    });
});

修正后的实际效果 #

• 所有用来触发子菜单展开/收起的父级a标签，依然可以正常实现子菜单展开、同级菜单关闭的预期交互，不会因为点击出现无意义的页面跳转
• 子菜单内部的所有普通跳转链接，不会被绑定带拦截逻辑的点击事件，点击后可以正常触发页面跳转

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