Используя JQuery, как я могу отличить один клик от следующего на том же элементе?

Question

Я пытаюсь реализовать щелчок на элементе HTML с помощью JQuery, но у меня возникают проблемы с выяснением того, как заставить систему понять, что необходимы два разных щелчка. Я понимаю, как заставить его работать с двумя разными кнопками, но у меня возникают проблемы с пониманием, как заставить его работать одним нажатием на элемент.

Например, когда я нажимаю 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;
   })
})

Answer 2

Вы можете использовать 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";
});