Javascript 首次使用后，slideUp和slideDown动画不起作用

我使用jQuery构建了一个类似于下拉列表的东西，但它只在前两次点击时起作用，然后就不起作用了。我怎样才能下拉列表？可以用一个循环来完成吗？（我还没有学会循环，所以任何解决方案都是可行的。）

对于每一张幻灯片和幻灯片，我都想安排不同的时间

jQuery（文档）.ready（函数（）{
jQuery（“.click on”）。单击（函数（）{
jQuery（“.box”）.slideUp（2000，函数（）{
jQuery（“.click on”）。单击（函数（）{
jQuery（“.box”）。向下滑动（500）；
});
返回false；
});
返回false；
});
});
.box{
宽度：300px；
高度：300px；
背景色：天蓝色；
}

这是一个风扇

这是一把枪

单击此处

你想实现这样的目标吗

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

我会给出@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
的别名来保存更多内容（这不起作用的唯一原因是，如果您使用的是另一个库，它定义了一个全局
$
变量，而有些库是这样做的。）这是因为您误解了
函数的含义。单击（）

.click（）
每次从所选DOM触发click事件时，都会设置处理程序函数

由于您在
.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（）

感谢您的编辑，我无法正确执行此操作…对此我非常抱歉。问题是因为您正在嵌套事件。这是一个非常糟糕的主意。每次单击
单击
元素时，您都在添加另一个slideUp调用，这将添加另一个
单击
并添加另一个slideDown。分离您的事件。我可以添加另一个slideUp调用吗y类循环功能？？？？？虽然我还没有学过如何创建循环，但仅供参考，你不需要把每个单词都大写，用大写字母书写被认为是粗鲁的，因为这会被解释为叫喊。要回答你的问题，你不需要任何循环。请看下面的答案，以获得更好的实现。我还建议-我也建议说这句话时，我们都无意冒犯，我们都必须从某个地方开始（我个人在不到2年前根本没有编码经验）——你应该学习编程的基础知识（比如循环、条件语句、函数等）在你尝试制作网页之前。你不需要以任何方式成为一名专家来使用javascript制作一些简单的交互式网站，但你需要了解这些基础知识。但是，现在，上滑和下滑的时间都是相同的…………我试图为每一个都实现不同的时间。上滑：-2s下滑：-0.5s
$(".click-on").click(function(){
    $(".box").slideToggle(1000)
}