jQuery实现点击侧边栏外移除active类功能失效如何修复？

• 事件冒泡冲突：点击.btn-open-sidecart打开侧边栏时，点击事件会向上冒泡到<body>节点，触发body绑定的点击事件，刚添加上的active类会被立刻移除，表现为所有功能失效
• 类名判断逻辑错误：直接用attr('class')做全等判断，只要元素存在多个类名（比如侧边栏同时有sidebar和其他自定义类）、或者点击的是侧边栏的内部子元素，判断就会失效，误触发关闭逻辑

jQuery(document).ready(function($){
    $(".btn-open-sidecart").click(function(e){
        // 阻止事件冒泡到body，避免触发外部关闭逻辑
        e.stopPropagation();
        $('.sidebar').addClass("active");
        $('.overlay').addClass("active");
    });

    $(".btn-close-sidecart").click(function(e){ 
        // 阻止事件冒泡到body
        e.stopPropagation();
        $('.sidebar').removeClass("active");
        $('.overlay').removeClass("active");
    });

    $('body').click(function(event){
        // 判断点击元素是否为侧边栏本身/内部子元素，不在范围内才执行关闭
        if(!$(event.target).closest('.sidebar').length) {
            $('.sidebar').removeClass('active');
            $('.overlay').removeClass('active');
        }
    });

    // 可选：点击遮罩层也触发关闭，符合常规交互习惯，不需要可删除
    $('.overlay').click(function(){
        $('.sidebar').removeClass("active");
        $('.overlay').removeClass("active");
    });
});

• 给打开、关闭按钮的点击事件添加e.stopPropagation()，拦截事件冒泡，避免刚触发打开就被body的点击事件关闭的冲突
• 用closest()方法替代原有的类名全等判断，不管侧边栏携带多少个类名、点击的是侧边栏内的任意子元素，都不会误触发关闭
• 新增了点击遮罩层关闭的可选逻辑，符合绝大多数侧边栏的交互习惯，不需要可直接删除对应代码段

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