使用jQuery，如何区分同一元素上的一次单击和下一次单击？

wi3ka0sx 于 2023-06-22 发布在 jQuery

关注(0)|答案(2)|浏览(149)

我试图用JQuery实现一个HTML元素上的点击，但是我在弄清楚如何让系统理解需要两个不同的点击时遇到了问题。我明白如何使它与两个不同的按钮工作，但我有麻烦理解如何使它的工作，使一次点击的元素。
例如，当我单击h3时，系统会同时运行这两个函数;它会向上滑动，然后它会马上向下滑动。我需要有1点击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');
   });
});

jquery

来源：https://stackoverflow.com/questions/61174831/using-jquery-how-can-i-differentiate-one-click-from-the-next-on-the-same-elemen

2条答案

按热度按时间

wgxvkvu91#

使用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;
   })
})

赞(0）回复(0）举报 2023-06-22

yqyhoc1h2#

你可以使用slideToogle来实现这一点，但通常你可以定义一个变量来跟踪下一个调用哪个函数：

$(document).ready( function(){
   let track = "up"
   $('h3').on('click', function(){
    if(track == "down") $(this).next().slideUp('slow');
    track = "up";
});

   $('h3').on('click', function(){
      if(track == "up") $(this).next().slideDown('slow');
      track = "down";
});

赞(0）回复(0）举报 2023-06-22

我来回答

使用jQuery，如何区分同一元素上的一次单击和下一次单击？

2条答案

相关问题

热门标签

最新问答