Ajax事件冒泡阻止失效：点击子菜单误关父菜单求修复

嘿，这个问题我太熟了——是事件冒泡在搞鬼！你看，子菜单的<li>嵌套在带有.toggle类的父<li>里面，当你点击子菜单节点时，点击事件会顺着DOM树往上冒泡，触发父元素的.toggle点击事件处理器，结果就意外触发了收起逻辑。

下面给你两种靠谱的解决办法：

方法一：阻止子菜单的事件冒泡 #

给子菜单的点击事件加个阻止冒泡的逻辑，这样点击子菜单时就不会触发父元素的折叠事件了：

// 保留你原来的.toggle点击逻辑
$("#category").on('click','.toggle',function(e){
    e.stopPropagation();
    if(!$(this).hasClass("opened")){
        $(this).children("i").removeClass("fa-plus-square").addClass("fa-minus-square");
        $(this).children('.sub').show();
        $(this).addClass("opened");
    }else{
        $(this).children("i").removeClass("fa-minus-square").addClass("fa-plus-square");
        $(this).children('.sub').hide();
        $(this).removeClass("opened");
    }
});

// 新增：阻止子菜单点击事件向上冒泡
$("#category").on('click','.sub li',function(e){
    e.stopPropagation();
});

方法二：精准绑定触发区域（更推荐） #

与其阻止冒泡，不如一开始就把折叠事件绑定到主菜单的可交互区域（比如图标<i>或者分类标题<a>），这样只有点击这些区域才会触发展开/收起，点击子菜单自然就不会有问题了：

// 把事件绑定到.toggle下的i和a元素，而非整个.toggle容器
$("#category").on('click','.toggle > i, .toggle > a',function(e){
    e.stopPropagation();
    // 获取父级的.toggle元素
    const parentToggle = $(this).closest('.toggle');
    if(!parentToggle.hasClass("opened")){
        parentToggle.children("i").removeClass("fa-plus-square").addClass("fa-minus-square");
        parentToggle.children('.sub').show();
        parentToggle.addClass("opened");
    }else{
        parentToggle.children("i").removeClass("fa-minus-square").addClass("fa-plus-square");
        parentToggle.children('.sub').hide();
        parentToggle.removeClass("opened");
    }
});

两种方法都能解决问题，方法二更符合用户交互逻辑——毕竟用户本来就只有点击分类标题或图标时才想折叠/展开子菜单，点击子菜单产品应该是跳转或其他操作，不会触发折叠。

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