当点击外部div时删除类，但在div关闭时保留删除

Question

当点击问号图标（文档的右上角）时，我有一个div打开。 单击时，我添加一个类，将问号图标转换为密闭图标。 当我在div外单击时，div关闭，类被移除，关闭的图标变成问号图标。 但是现在，当我单击文档时，它会在div打开或关闭时添加和删除类。

如果有人有一个想法，只有当div打开时，如何在文档上绑定该类时才能删除该类。 感谢

jQuery('.showmenu').click(function(e){ 
     e.stopPropagation(); 
     jQuery('.about-btn').toggleClass("active"); 
     jQuery('.about').slideToggle('fast'); 
    }); 

jQuery('.about').click(function(e){ 
    e.stopPropagation(); 
}); 

jQuery(document).click(function(){ 
jQuery('.about-btn').toggleClass("active"); 
    jQuery('.about').slideUp('fast'); 
}); 

Answer 1

IMO 添加/绑定$(document).click只有在/在$('.showmenu').click功能。 后来做$(document).unbind('click')在$(document).click功能

例如：

$('.showmenu').click(function (e) { 
     e.stopPropagation(); 
     $('.about-btn').toggleClass("active"); 
     $('.about').slideToggle('fast'); 

     //Binding click function on document 
     $(document).click(function() { 
      $('.about-btn').toggleClass("active"); 
      $('.about').slideUp('fast'); 

      $(document).unbind('click'); //Unbind click 
     }); 

    }); 

$('.about').click(function (e) { 
    e.stopPropagation(); 
}); 

Answer 2

只有删除类active而不是触发它的：

jQuery(document).click(function(){ 
    jQuery('.about-btn').removeClass("active"); 
    jQuery('.about').slideUp('fast'); 
}); 

如果我理解正确的，在div外面时，点击你永远需要设置类active，所以它应该做的技巧

Answer 3

而不是将单击事件注册到document，您可以在弹出的div下面叠加显示在一起并具有关闭事件寄存器取而代之。

---

或者你也可以存储在一个变量的状态，像这样：

var isOpen = false; 
jQuery('.showmenu').click(function(e){ 
    e.stopPropagation(); 
    jQuery('.about-btn').toggleClass("active"); 
    jQuery('.about').slideToggle('fast'); 
    isOpen = true; 
}); 

jQuery('.about').click(function(e){ 
    e.stopPropagation(); 
}); 

jQuery(document).click(function(){ 
    if(!isOpen) return; // early return if not opened 
    jQuery('.about-btn').toggleClass("active"); 
jQuery('.about').slideUp('fast'); 
});