Question

我正在使用汉堡包菜单图标，该图标会在点击时进行转换。

动画正在通过.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>

亲切的问候。

Answer 1

你可以暂时禁用按钮，直到过渡结束时有一个承诺，或者在.is(':animated')

时不切换班级

或更简单：

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

编辑：

基于小提琴：

您需要更改按钮以使用nav 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);
    });
  });
});

在toggleClass之后禁用并启用click

1 个答案: