Question

我有一个关于jQuery close系统的问题。我已从codepen.io

创建了 DEMO

在这个演示中你可以看到有两个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，因为它们的点击事件会在各自的单击功能中停止。因此，简单的解决方案是在相反的单击函数中添加remove类函数。即。

    // 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");
});

为什么当前开放的div不会关闭

1 个答案: