jQuery Einblenden/Ausblenden auf der Außenseite klicken + Taste

Question

Für meine div Show/hide Ich möchte nur, dass es geschlossen wird, wenn der Benutzer außerhalb des Bereichs klickt oder sonst auf die Schließen-Schaltfläche, derzeit schließt es unabhängig davon, ob Sie innen oder außen klicken, Das bedeutet auch, dass Sie nicht auf den Link innerhalb des div klicken können.

$('#see').click(function(e){ 
$('.overlaybox').show("slide", { direction: "right" }, 500); 
    e.stopPropagation(); 
}); 

$(document).click(function(){ 
$('.overlaybox').hide("slide", { direction: "right" }, 500); 
}); 

jsfiddle

Answer 1

Sie müssen prüfen, ob das angeklickt Element das Zielelement ist oder nicht. Wenn nicht, können Sie das Zielelement ausblenden. Sonst überspringen Sie es. Folgenden Code

$(document).mouseup(function (e) 
 
    { 
 
    var container = $(".overlaybox"); 
 

 
    if (!container.is(e.target) && container.has(e.target).length === 0) 
 
    { 
 
     container.hide(); 
 
    } 
 
});

.overlaybox{ 
 
height:100px; 
 
    width:100px; 
 
    background:teal; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="overlaybox"> 
 
    </div>

Hier ist die aktualisierte Geige des Codes helfen - https://jsfiddle.net/etmf4s2f/6/