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();