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都绑定一个click事件（因为该方法被调用了5次，所以5个click事件被绑定到该元素）

您只需要将click事件绑定一次。

将单击绑定事件移动到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();