jquery - 在 body 点击我需要向上滑动，这是使用按钮点击(slideToggle)向下滑动

Question

我是 Jquery 的初学者。我在一个按钮上使用简单的滑动切换。最初我将 div 放在 display none 中，每当我点击按钮时我都在使用滑动切换功能。它工作正常。但是当我点击 body 时，我需要向上滑动(显示:无)以及点击按钮。我尝试使用 $('body:not(element)') 点击功能，但它对我不起作用。请帮我解决。

请参阅此 fiddle 以获得正常的幻灯片功能 SlideToggle Fiddle

我试过但没有用的 fiddle Tried Fiddle

$("#legendButton").click(function(){
    $("#slidetooglelegends").slideToggle("slow");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="LegendSlideSection">

	<div id="slidetooglelegends" style="width:200px;height:100px;border:1px solid #a3a3a3;background:#fff;display:none;">
		   hello slide
	</div>

	<button id="legendButton" class="btn btn-primary">Legend</button>
</div>

Answer 1

问题是，当您单击滑动按钮时，从技术上讲，您也单击了主体，因为它们彼此重叠。您应该停止事件冒泡(如果您愿意的话)，以便它只执行第一个捕获的事件而不委托(delegate)给其他事件处理程序。

这可以用

来实现

event.stopPropagation();

请参阅以下内容 jsFiddle

$("#legendButton").click(function(event){
    event.stopPropagation();
    $("#slidetooglelegends").slideToggle("slow");
});

$("body:not(#legendButton)").click(function(){
    $("#slidetooglelegends").slideUp("slow");
});