jQuery .slideToggle – 以某种方式被多次触发

Question

这是我的代码，我试图从 JS 中删除任何不必要的东西： http://codepen.io/Zacaree/pen/EmZJXy

当我单击其中一个下拉按钮（页面右侧）触发 jQuery 的 .slideToggle 时，它会打开一个抽屉，但不会保持打开状态，抽屉会触发多次。触发次数随着页面下方每个连续面板的增加而增加。

最上面的面板始终正常工作。

function foo() {    
    $('.dashboard-right').children('h1').after(functionContainer).siblings('.function-container').removeClass('isPaused');

    $('.dropdown-button').click(function(){
        $(this).parents('.function-footer').siblings('.log-container').slideToggle('fast');
        $(this).children('.arrow').toggleClass('active');
    });
};

foo();
foo();
foo();
foo();
foo();

我是设计师而不是开发人员，所以请原谅我发布可能是我的一个简单错误。我已经为此奋斗了很久，但似乎无法弄清楚。非常感谢任何能向我解释我做错了什么的人！

谢谢！

Answer 1

您每次调用 foo 时都绑定了一个点击事件（因为该方法被调用了 5 次，所以 5 个点击事件被绑定到该元素）

点击事件只需绑定一次即可。

将点击绑定事件移到 foo 方法之外。

http://codepen.io/anon/pen/QvpLeg

function foo() {    
    $('.dashboard-right').children('h1')
                        .after(functionContainer)
                        .siblings('.function-container')
                        .removeClass('isPaused');
  };

$('body').on('click', '.dropdown-button' ,function() {
      $(this).parents('.function-footer')
             .siblings('.log-container')
             .slideToggle('fast');

      $(this).children('.arrow').toggleClass('active');
});

  foo();
  foo();
  foo();
  foo();
  foo();

jQuery .slideToggle – 以某种方式被多次触发

jQuery .slideToggle – Somehow being triggered multiple times

javascript

jquery

slidetoggle