當點擊外部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'); 
});