slideUp 和 slideDown 动画在第一次使用后不起作用

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 的回答是我会给出的 - 但刚刚看到向上滑动和向下滑动应该有不同时间的评论，你必须改为这样做。基本上，检查当您单击该框是否可见时，并相应地 slideUp 或 dlideDown：

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

slideUp 和 slideDown 动画在第一次使用后不起作用

slideUp and slideDown animation does not work after first use

javascript

jquery

dropdown

slidetoggle

dropdownbox