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

Question

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

这里的问题是我已经尝试 slideToggle() 但我希望在单击另一个触发器 link 时折叠一个内容区域并且 slideToggle() 保持打开状态除非您单击在同一个触发器上再次 link 关闭它。

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

Jose你只需要添加一个return语句就可以跳出栈了。像这样：

if ($('.panel').hasClass('clicked')) {

$('.panel.clicked').removeClass('clicked');
$('.panel').slideUp();
return; //new code here

}

还有一个 jquery UI 库掌握了这个功能：https://jqueryui.com/accordion/

Answer 2

您需要检查面板在滑下之前是否打开过。您可以通过选择与单击的 .toggle 元素对应的面板并检查它是否具有 class 或 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();
  }
});

Answer 3

您需要做的就是添加一个 else，这样 slideUp() 和 slideDown() 就不会运行紧接着。如果您阅读代码，您将关闭它然后再打开它。不管你是不是刚关了。

else{

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

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

One click event with multiple triggers to make content slide up and down

javascript

jquery

slidetoggle

slidedown