javascript - 为什么当前打开的 div 没有关闭

Question

我有一个关于 jQuery 关闭系统的问题。我创建了这个 DEMO 来自 codepen.io

在此演示中，您可以看到有两个 div(红色和蓝色)。当您单击红色 div 时，.CRtW11 将处于事件状态。但是在你点击蓝色的 div 之后，.CRtW11 就停留在那里；它需要处于非事件状态。那里有什么问题，谁能告诉我？

JS

// FOR cR
$("body").on("click", ".cR", function(event) {
   event.stopPropagation();
   var $current = $(this).find('.CRtW11').toggleClass("CRtW11-active");
   $('.CRtW11').not($current).removeClass('CRtW11-active');
   var $currenta = $(this).find('.ReaC').toggleClass("ReaC-active");
   $(".ReaC").not($currenta).removeClass("ReaC-active");
});
$("body").click(function() {
   $(".CRtW11").removeClass("CRtW11-active");
   $(".ReaC").removeClass("ReaC-active");
});

// FOR Br
$("body").on("click",".Br", function(event) {
    event.stopPropagation();
    var $current = $(this).find(".BRc").toggleClass("BRc-active");
   $(".BRc").not($current).removeClass("BRc-active");
});
$("body").on("click", function(){
   $(".BRc").removeClass("BRc-active");
});

Answer 1

$("body").click(function() {
   $(".CRtW11").removeClass("CRtW11-active");
   $(".ReaC").removeClass("ReaC-active");
});

此功能不适用于红色和蓝色 div，因为它们的点击事件在各自的点击功能中停止。所以简单的解决方案是在相反的点击功能中添加删除类功能。即

    // FOR cR
$("body").on("click", ".cR", function(event) {
   $(".BRc").removeClass("BRc-active");
   event.stopPropagation();
   var $current = $(this).find('.CRtW11').toggleClass("CRtW11-active");
   $('.CRtW11').not($current).removeClass('CRtW11-active');
   var $currenta = $(this).find('.ReaC').toggleClass("ReaC-active");
   $(".ReaC").not($currenta).removeClass("ReaC-active");
});
$("body").click(function() {
   $(".CRtW11").removeClass("CRtW11-active");
   $(".ReaC").removeClass("ReaC-active");
});

// FOR Br
$("body").on("click",".Br", function(event) {
    $(".CRtW11").removeClass("CRtW11-active");
   $(".ReaC").removeClass("ReaC-active");
    event.stopPropagation();
    var $current = $(this).find(".BRc").toggleClass("BRc-active");
   $(".BRc").not($current).removeClass("BRc-active");
});
$("body").on("click", function(){
   $(".BRc").removeClass("BRc-active");
});