jQuery侧边滑出菜单实现点击外部区域关闭功能的技术咨询

直接替换原有JS代码即可实现需求，无需修改HTML和CSS代码：

jQuery(document).ready(function($){
    // 通用关闭菜单方法
    function closeMenu() {
        $('header').removeClass('open');
        $('html').removeClass('open');
        $('html, body').removeClass('noscroll');
    }

    // 打开菜单逻辑
    $('.btn-open-menu, .btn-open-menu2').click(function (e) {
        // 阻止事件冒泡到页面顶层
        e.stopPropagation();
        $('header').addClass('open');
        $('html').addClass('open');
        $('html, body').addClass('noscroll');
    });

    // 原有触发关闭的按钮绑定
    $('.link-menu, .btn-close-menu, .btn-close-menu2').click(closeMenu);

    // 点击菜单内部区域不触发关闭
    $('.header-content').click(function(e) {
        e.stopPropagation();
    });

    // 点击页面其他区域自动关闭菜单
    $(document).click(function() {
        if($('header').hasClass('open')) {
            closeMenu();
        }
    });
});

代码说明 #

• 首先将重复的关闭逻辑封装为公共函数，减少代码冗余，后续调整关闭逻辑只需修改一处
• 打开菜单的点击事件增加阻止冒泡逻辑，避免点击打开按钮时事件冒泡到顶层，触发刚打开就关闭的问题
• 给菜单内容区域绑定阻止冒泡事件，保证用户点击菜单内部的导航、按钮等元素时不会关闭菜单
• 给整个文档绑定点击事件，只要菜单处于打开状态，点击非菜单/非打开按钮的区域就会自动执行关闭逻辑

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