jquery - 在toggleClass之后禁用并启用单击

我使用的是一个点击即可转换的汉堡菜单图标。

动画正在通过.toggleClass进行

$(document).ready(function() {
  $('#nav-hamburger-big').click(function() {
    $(this).toggleClass('open');
  });
});

示例：http://jsfiddle.net/ampnuwsd/8/

此图标触发基本的引导菜单。但是我注意到，如果页面仍在加载中，或者当您第二次单击它时，动画会很快挂起。它仍然会触发菜单弹出，但是转换只是跳过而导致图标反转（菜单关闭时为X，菜单打开时为汉堡）。

第一次点击后，是否有任何方法可以延迟点击时间（例如1.5秒）？

编辑：滚动脚本：

<script>
// script for smooth scrolling to anchor points
$(document).ready(function() {
  $('a[href^="#"]').on('click', function(e) {
    e.preventDefault();

    var target = this.hash;
    var $target = $(target);

    $('html, body').stop().animate({
      'scrollTop': $target.offset().top
    }, 901, 'swing', function() {

    });
  });
});
</script>

亲切的问候。

最佳答案

您可以暂时禁用按钮，直到过渡期结束，或者在.is(':animated')时不切换类

或更简单地说：

$('#nav-hamburger-big').click(function() {
    $('#menu').is(':hidden') ? $(this).removeClass('open') : $(this).addClass('open');
});

编辑：

根据小提琴：


您需要更改按钮才能获得id nav-hamburger-big
将您的第一条CSS行更改为＃nav-hamburger-big div {


然后：

$(document).ready(function() {
  $('a[href^="#"]').on('click', function(e) {
    //disable the button first
    $('#nav-hamburger-big').prop('disabled',true);
    e.preventDefault();

    var target = this.hash;
    var $target = $(target);

    $('html, body').stop().animate({
      'scrollTop': $target.offset().top
    }, 901, 'swing', function() {
      //now re-enable
      $('#nav-hamburger-big').prop('disabled',false);
    });
  });
});