Question

我已编码，如果您在弹出导航栏外单击，它会关闭导航，但是在导航栏外面有一个名为#button的按钮。当我点击它时，它只是“重新滑动”导航而不是摆脱它。

按钮有自己独立的代码行，可以切换幻灯片。

我有一种感觉，当我点击该按钮时，我提到的第一条规则被触发，然后按钮重新激活滑出而不是进入，因为我之前提到过的规则已经切换掉了。

我希望能够在导航结束时使用该按钮，但仍保留使用规则，允许我在导航栏外点击时退出。

请帮忙

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

您可以停止在按钮上传播同一事件，以便在执行时不会发生正文点击逻辑。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

我想在这个jQuery规则中做一个例外

1 个答案: