幻灯片向上和向下滑动动画在首次使用后不起作用

Question

我已经使用jQuery构建了一个类似下拉列表的东西，但它只适用于前两次点击，然后就不行了。 如何进行下拉列表？可以通过循环完成吗？(我还没有学习循环，所以任何解决方案都可以。

对于每个SLIDEUP和SLIDEDOWN，我想制作不同的时间。

jQuery(document).ready(function() {
jQuery(".click-on").click(function() {
jQuery(".box").slideUp(2000, function() {
jQuery(".click-on").click(function() {
jQuery(".box").slideDown(500);
});
return false;
});
return false;
});
});

.box {
width: 300px;
height: 300px;
background-color: skyblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="fan">THIS IS A FAN</p>
<p id="gun">THIS IS A GUN</p>
<p class="click-on">Click Here</p>
<div class="box"></div>

Answer 1

你想实现这样的事情吗？

$(document).ready(function(){
$(".click-on").click(function(){
$('.box').slideToggle();
});
});

https://jsfiddle.net/jsrc9mbd/1/

Answer 2

@hetious的答案是我会给出的 - 但是刚刚看到向上滑动和向下滑动应该有不同的时间的评论，你必须这样做。基本上，当您单击该框是否可见时，请检查并相应地向上滑动或向下滑动：

jQuery(document).ready(function() {
jQuery(".click-on").click(function() {
var box = jQuery(".box");
if (box.is(":visible")) {
box.slideUp(2000);
}
else {
box.slideDown(500);
}
});
);

(请注意，我已经为jQuery(".box")提取了一个变量，只是为了节省一些键入。您还可以使用$作为jQuery保存更多内容的别名(这不起作用的唯一原因是如果您使用的是另一个定义全局$变量的库，少数库会这样做。

Answer 3

这是因为您误解了.click()函数的含义。

.click()每次从选定的 DOM 触发单击事件时设置处理程序函数。

由于您在.slideUp()的回调中调用了另一个.click()，因此您实际上是在替换处理程序函数。在您当前的逻辑中，明显的解决方法是在每次单击后执行无限回调，例如：

jQuery(".click-on").click(function(){
jQuery(".box").slideUp(2000, function(){
jQuery(".click-on").click(function(){
jQuery(".box").slideDown(500,function(){
jQuery(".click-on").click(function(){ 
jQuery(".box").slideUp(2000, function(){//Repeating callbacks... ...
});
});
});
});

说真的，这是非常糟糕的。不应进行这种执行。

相反，最好对每次单击进行条件检查，以便逻辑将确定自己是.slideUp()还是应该调用.slideDown()。它应该像

$(".click-on").click(function(){//you can also use $ instead of jQuery
//do some conditional check here
if(isSlidedUp)$(".box").slideDown(1000);
else $(".box").slideUp(1000)
});

甚至更好的是你使用.slideToogle().

$(".click-on").click(function(){
$(".box").slideToggle(1000)
}