divを外したときにクラスを削除しましたが、divを閉じたときに削除されました

Question

私は疑問符アイコン（ドキュメントの右上）をクリックするとdivが開きます。 クリックすると、疑問符のアイコンを閉じるアイコンに変換するクラスを追加します。 divの外側をクリックするとdivが閉じられ、クラスが削除され、閉じられたアイコンが疑問符のアイコンになります。 しかし、ドキュメントをクリックすると、divが開いているか閉じているときにクラスが追加および削除されます。

誰かが、divが開いているときにのみドキュメント上でclikedされたときに、どのようにクラスを削除できるか考えている人がいます。 おかげ

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 は、ときにのみ/ $('.showmenu').click機能のオン/バインド$(document).clickを追加します。 その後$(document).click機能で$(document).unbind('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

clickイベントをdocumentに登録する代わりに、一緒に表示されるポップアップdivの下にオーバーレイがあり、closeイベントレジスタがth代わりに

---

それとも、またそのような変数の状態を保存することができます：

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'); 
});