Ich möchte eine Ausnahme in dieser jQuery-Regel machen

Question

Ich habe so codiert, dass, wenn Sie außerhalb der Pop-Out-Nav klicken, schließt es das Nav, jedoch gibt es eine Schaltfläche mit dem Namen # Schaltfläche, die außerhalb des Nav ist. Wenn ich es anklicke, wird das Navigationsgerät einfach zurückgeschoben, anstatt es loszuwerden.

Die Schaltfläche hat eine eigene Codezeile, die die Folie umschaltet.

Ich habe das Gefühl, dass, wenn ich auf diesen Knopf klicke, die erste Regel ausgelöst wird, dann die Taste re aktiviert slide out statt in, wie die vorherige Regel, die ich erwähnte, ausgeschaltet davon.

Ich möchte in der Lage sein, die Schaltfläche zu verwenden, wenn Nav aus ist, aber immer noch die Verwendung der Regel beibehalten, die es mir erlaubt, beim Klicken außerhalb des Nav zu beenden.

Bitte helfen

jQuery(document).ready(function(){ 
jQuery("#button").click(function(){ 
    jQuery("#popoutnav").slideToggle(); 
}); 
jQuery("#cross").click(function(){ 
    jQuery("#popoutnav").slideToggle(); 
}); 
}); 

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

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

Answer 1

Sie die Ausbreitung des gleichen Ereignisses auf die Schaltfläche stoppen kann, so dass, wenn es der Körper Klick Logik ausführt wird nicht passieren.

jQuery(function($){ 
 
\t var $popupnav = $('#popupnav'); 
 
\t $popupnav.hide(); 
 
\t 
 
\t $('#button').on('click', function(e){ 
 
\t \t e.stopPropagation(); 
 
\t \t $popupnav.slideToggle(); 
 
\t }); 
 
\t 
 
\t $('body').on('click', function(e){ 
 
\t \t if (!$popupnav.is(e.target) && !$popupnav.has(e.target).length) { 
 
\t \t \t $popupnav.slideUp(); 
 
\t \t } 
 
\t }); 
 
});

#popupnav { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button id="button">toggle</button> 
 
<div id="popupnav"></div>