jQuery: Hide-Element auf, klicken Sie irgendwo sonst abgesehen von dem Element

Question

Mögliche Duplizieren:
How to detect a click outside an element?

Ich versuche, ein 'div' zu erreichen, dass versteckt, wenn der Benutzer überall klickt außer auf dem Element. Ich habe folgenden Code toggle(), wenn der Benutzer auf eine Schaltfläche klickt. Ich möchte, dass der Knopf klicken bleibt und wenn das 'Details' Element sichtbar ist, reagiert auf andere Teile des Bildschirms.

$('.nav-toggle').click(function(){ 
     //get collapse content selector 
     var collapse_content_selector = $(this).attr('href'); 

     //make the collapse content to be shown or hide 
     var toggle_switch = $(this); 
     $(collapse_content_selector).toggle(function(){ 
      if($(this).css('display')=='none'){ 
          //change the button label to be 'Show' 
      toggle_switch.html('Show Details'); 
      }else{ 
          //change the button label to be 'Hide' 
      toggle_switch.html('Hide Details'); 
      } 
     }); 
    }); 

Answer 1

Sie können auf das Konzept von event delegation zurückgreifen.

$(function() { 
    $(document).on('click', function(e) { 
     if (e.target.id === 'div1') { 
      alert('Div Clicked !!'); 
     } else { 
      $('#div1').hide(); 
     } 

    }) 
});​ 

prüfen FIDDLE

Ich verstehe nicht, was Sie durch die Integration mit dem anderen Teil gemeint .. Dies ist die grundlegende Idee ..

Answer 2

können Sie die jQuery .blur() Funktion verwenden, um ein div, wenn Benutzer klicken Sie auf ein anderes Element zu verstecken (wie Link, boutton, whathever ..)

Die Unschärfe Ereignis Feuer ist, wenn ein Element den Fokus verliert (Benutzer wählen ein anderes Element in der DOM-Struktur)

Ich verstehe nicht die Verbindung mit Ihrem Toggle. Wenn die Umschalttaste das DIV verwaltet, befindet es sich innerhalb der Toggle-Funktion, in der Sie das hide()/show() auf dem div platzieren sollten, während gleichzeitig der Text der Schaltfläche aktualisiert wird.