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

这是因为您误解了.mod函数的含义。

.click()每次在从选定的DOM触发click事件时设置处理程序功能。

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

.slideUp()

严重的是，这非常糟糕。这样的实现不应该完成。

相反，最好对每次单击进行条件检查，因此逻辑将确定应该调用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动画不起作用

3 个答案: