div auf einen Klick anzeigen/ausblenden, wenn außerhalb des div geklickt

Question

Das ist, was ich bisher: Zum Beispiel, wenn ich auf button1, content1 zeigt, wenn ich auf button2 klicke, schließt content1 und content2 erscheint . , die bisher mit diesem Code funktioniert:

$("#buttons a").click(function(e){ 
    e.preventDefault(); 
    var toShow = $(this).attr('href'); 
    $(".togg").fadeOut(); 
    $(toShow).fadeIn(); 
    }); 

JSFiddle Was ich versuche diese Funktion zu tun ist, halten, aber einige Dinge hinzufügen: wenn content1 bereits geöffnet ist, Toggle es, wenn ich auf die entsprechende Schaltfläche klicken (button1), und schalten Sie es auch um, wenn Sie außerhalb von content1 div klicken. Kurz gesagt, ich möchte es umschalten, wenn irgendwo anders als das Div selbst geklickt wird.

Answer 1

Wie Sie wollen prüfen, ob die auf das Element ist oder außerhalb des Elements, für die Sie überprüfen müssen nodeName oder tagName oder id

$(document).click(function(e) { 
    //Check the element is none of the DIVS which we wants prevent. 
    if(e.target.id != "content1" && e.target.id != "content2" && e.target.id != "content3") 
    { 
     //Hide the content div which is visible now. 
     $('div.togg:visible').hide(); 
    } 
}); 

Sie müssen nur einen dynamischen Wähler schaffen Art zu erreichen der dynamischen Umschaltfunktion.

$("#buttons a").click(function(e){ 
    var selector = $('.'+$(this).attr('id')); 
    selector.toggle(); 
    $('div.togg').not(selector).hide(); 
}); 

$("#buttons a").click(function(e){ 
 
    var selector = $('.'+$(this).attr('id')); 
 
    selector.toggle(); 
 
    $('div.togg').not(selector).hide(); 
 
}); 
 
$(document).click(function(e) { 
 
    //Check the element is none of the DIVS which we wants prevent. 
 
    if(e.target.id != "content1" && e.target.id != "content2" && e.target.id != "content3") 
 
    { 
 
     //Hide the content div which is visible now. 
 
     $('div.togg:visible').hide(); 
 
    } 
 
});

.content1 {display:none;} 
 
.content2 {display:none;} 
 
.content3 {display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="buttons"> 
 
    <a href="#" id="content1">Div 1</a> 
 
    <a href="#" id="content2">Div 2</a> 
 
    <a href="#" id="content3">Div 3</a> 
 
</div> 
 
<div> 
 
    <div class="content1 togg">1111</div> 
 
    <div class="content2 togg">2222</div> 
 
    <div class="content3 togg">3333</div> 
 
</div>