javascript - 使用 JQuery，如何区分同一元素上的一次点击和下一次点击？

Question

我正在尝试使用 JQuery 实现对 HTML 元素的点击，但我在弄清楚如何使系统了解需要两次不同的点击时遇到问题。我了解如何使其与两个不同的按钮一起工作，但我无法理解如何通过单击该元素使其工作。

例如，当我单击 h3 时，系统会运行这两个函数；它会向上滑动，然后立即向下滑动。我需要单击 h3 并让该函数运行 .slideUp() 并停止。一旦停止，我需要再次单击它来运行 .slideDown()。这是一个类项目，我必须使用以下函数:

animate()
fadeIn()
fadeOut()
slideDown()
slideUp()

这是我的代码:

$(document).ready( function(){
   $('h3').on('click', function(){
     $(this).next().slideUp('slow');
   });

   $('h3').on('click', function(){
     $(this).next().slideDown('slow');
   });
});

Answer 1

使用slideToggle()，删除另一个监听器:

$(document).ready( function(){
   $('h3').on('click', function(){
      $(this).next().slideToggle('slow');
   })
})

如果必须使用 slideUp 和 slideDown，请使用变量:

$(document).ready( function(){
   var shouldOpen = true;
   $('h3').on('click', function(){
      if(shouldOpen) $(this).next().slideDown('slow');
      else $(this).next().slideUp('slow');
      shouldOpen = !shouldOpen;
   })
})