javascript - 一次点击事件多次触发，让内容上下滑动

Question

我又来这里是为了另一个我需要帮助但似乎找不到解决方案的问题。我利用 slideDown() 和 slideUp() 实现了此功能，您可以查看 here .

这里的问题是我已经尝试过 slideToggle() 但我希望在单击另一个触发链接时折叠一个内容区域并且 slideToggle() 保留它打开，除非您再次单击相同的触发链接将其关闭。

var panel = $('.panel').hide();

$('.toggle').click(function(event) {
  event.preventDefault();
  var loc = this.id; //this grabs the name of the location  

  if ($('.panel').hasClass('clicked')) {
    $('.panel.clicked').removeClass('clicked');
    $('.panel').slideUp();
  }

  $('.panel.' + loc).addClass('clicked');
  $('.panel.' + loc).slideDown();
});

目前上面的代码有效，但如果你点击 TMC and click on TMC again to close it, it slides up and slides down again . SlideToggle 将打开所有这些。

谢谢!

Answer 1

在向下滑动面板之前，您需要检查面板之前是否打开过。您可以通过选择与被点击的 .toggle 元素对应的面板并检查它是否具有 clicked 类来执行此操作。除此之外，我还稍微简化了您的代码。

Updated Example

$('.toggle').click(function(event) {
  var id = this.id,
      wasOpen = $(this).closest('.expand').next('.panel').hasClass('clicked');

  event.preventDefault();
  $('.panel').removeClass('clicked').slideUp();

  if (!wasOpen) {
    $('.panel.' + id).addClass('clicked').slideDown();
  }
});