このjQueryルールで例外を作成したい

Question

ポップアウトナビの外側をクリックするとナビゲーションが閉じられるようにコード化されていますが、navの外にある#buttonというボタンがあります。私がそれをクリックすると、ナビを取り除くのではなく、ナビを元に戻すだけです。

ボタンには、スライドを切り替える独自の別のコード行があります。

私は、そのボタンをクリックすると、前述の最初のルールが起動され、その後、ボタンは、以前のルールと同じように、スライドアウトをアクティブにします。

navが外出しているときにボタンを使用できるようにしたいが、navの外をクリックしたときに終了することができるルールを使用している。

それが実行された場合、本体のクリックロジックが起こらないようにするには、ボタンの上に同じイベントの伝播を停止することができます

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

を助けてください。

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>