如何实现点击html/body或.jmp-container外部隐藏菜单？

我有一段jQuery代码，原本点击.jmp-container元素可以隐藏菜单div。现在需要修改代码，实现点击HTML/Body区域，或者.jmp-container元素外部时，执行el.find(".jmp-container, .m1").toggleClass("active")来切换菜单状态，但我尝试的修改代码没有生效，求解决方法。

原有代码 #

(function($){
$(document).ready(function(){
    $(".jmp-menu-box").each(function(){
        let el=$(this);
        el.on("click", ".jmp-btn-group .m1", function(){
            el.find(".jmp-container").toggleClass("active");
            $(this).toggleClass("active");
        }).on("click", ".jmp-btn-group .m2", function(){
            $("html, body").stop().animate({scrollTop:0}, 200);
        });

        el.on("click", ".jmp-container", function(e){
            if(e.target==this)
            {
                el.find(".jmp-container, .m1").toggleClass("active");
            }
        });
    });
});
})(jQuery);

待修改的代码片段 #

el.on("click", ".jmp-container", function(e){
        if(e.target==this)
        {
            el.find(".jmp-container, .m1").toggleClass("active");
        }
    });

我尝试的修改代码 #

el.on("click", "html", function(e){
        if(e.target==this)
        {
            el.find(".jmp-container, .m1").toggleClass("active");
        }
    });

解决方案 #

你的问题出在事件委托的绑定对象错误：你把html的点击事件委托给了.jmp-menu-box（也就是el），但html是el的父级元素，这种委托方式不会生效。正确的做法是直接在document上绑定点击事件，同时判断点击目标是否属于菜单相关元素的外部，还要阻止菜单内部点击的事件冒泡，避免误触发关闭逻辑。

修改后的完整代码 #

(function($){
$(document).ready(function(){
    $(".jmp-menu-box").each(function(){
        let el=$(this);
        // 点击m1按钮切换菜单状态
        el.on("click", ".jmp-btn-group .m1", function(e){
            // 阻止事件冒泡，避免触发document的点击事件导致刚打开就关闭
            e.stopPropagation();
            el.find(".jmp-container").toggleClass("active");
            $(this).toggleClass("active");
        }).on("click", ".jmp-btn-group .m2", function(){
            $("html, body").stop().animate({scrollTop:0}, 200);
        });

        // 点击.jmp-container本身时关闭菜单（保留原有逻辑）
        el.on("click", ".jmp-container", function(e){
            if(e.target==this)
            {
                el.find(".jmp-container, .m1").toggleClass("active");
            }
        });

        // 点击菜单内部其他元素时阻止冒泡，避免触发外部关闭
        el.on("click", ".jmp-container *", function(e){
            e.stopPropagation();
        });
    });

    // 绑定document点击事件，处理外部点击关闭菜单
    $(document).on("click", function(e){
        // 检查点击目标是否不在任何.jmp-menu-box内部
        if(!$(e.target).closest(".jmp-menu-box").length){
            // 关闭所有打开的菜单
            $(".jmp-menu-box").find(".jmp-container, .m1").removeClass("active");
            // 如果只需要关闭当前打开的菜单，可替换为下面的逻辑
            // $(".jmp-menu-box .jmp-container.active").closest(".jmp-menu-box").find(".jmp-container, .m1").removeClass("active");
        }
    });
});
})(jQuery);

关键修改点说明 #

1. 在.m1的点击事件中添加e.stopPropagation()，防止点击按钮时事件冒泡到document，导致菜单刚打开就被关闭。
2. 给.jmp-container内部的所有元素添加点击事件，阻止冒泡，确保点击菜单内容时不会触发外部关闭逻辑。
3. 直接在document上绑定点击事件，通过closest(".jmp-menu-box")判断点击目标是否属于菜单区域外部，如果是，则关闭对应菜单。

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