javascript - 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 时，您都绑定(bind)了一个点击事件(因为该方法被调用了 5 次，所以 5 个点击事件被绑定(bind)到该元素)

您只需要绑定(bind)一次点击事件。

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