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

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

1 个答案: