Question

我是Jquery的初学者。我在一个按钮上使用简单的幻灯片切换。最初我将div显示为none，当我点击按钮时我正在使用幻灯片切换功能。它工作正常。但是当我点击身体时，我需要向上滑动（显示：无）以及点击按钮。我尝试用$（'body：not（element）'）点击功能它不适合我。 Plz帮我解决。

请参阅此小提琴，了解正常的幻灯片功能SlideToggle 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

问题是当你点击幻灯片按钮时，你也在技术上点击了身体，因为它们相互重叠。您应该暂停事件冒泡（如果愿意），以便它只执行第一个捕获的事件，而不是委托给其他事件处理程序。

这可以通过

来实现

event.stopPropagation();

请参阅以下jsFiddle

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

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

Answer 2

很难理解你的问题。

仍然基于我从你的问题中所理解的，我在这里提供了一个答案。

希望这有帮助。

<强> HTML

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

<强> JQUERY

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

Fiddle is here

在身体上单击我需要向上滑动，使用按钮单击向下滑动（slideToggle）

2 个答案: