启动4:禁用按钮，直到模态动画完成

Question

我正在使用一个引导4模式来显示一个大的导航。为了打开导航，我使用一个带有CSS动画的切换按钮。动画将汉堡包菜单图标更改为X。

问题是，如果您单击“快速”，而模态动画还没有准备好，按钮就会混乱，甚至在已经关闭的菜单/模式下也会显示X。

在模态动画准备好之前，有任何方法禁用按钮吗？

这是我的密码：

$('.menu').click(function(){
   $('#burger').toggleClass('active');
});

我看到，有一种方式可以听模态动画：

$('#myModal').on('shown', function () {
  // do something… 
})

但我想不出如何在我的函数中实现它。

下面是我的实际代码：代码/pen/JjjqRpN

Answer 1

你可以把汉堡的切换和表演/隐藏的模式事件联系起来。

var toggleBurger = function () {
  $('#burger').toggleClass('active-sandwich');
}

$('#nav-modal').on('show.bs.modal', toggleBurger)
$('#nav-modal').on('hide.bs.modal', toggleBurger)

演示

Answer 2

你可以这样写

$(document).ready(function(){
    var isShown = false;
    $('#nav-modal').on('shown.bs.modal', function(){
        isShown = false;
        $("#burger").css("display", "block");
    });

    if(!isShown)
    {
        $('#burger').on('click', function(){
            isShown = true;
            $("#burger").css("display", "none");
        });
    }

    $('#nav-modal').on('hidden.bs.modal', function () {
       isShown = false;
       $("#burger").css("display", "block");
    });

抱歉，代码有点乱，但我希望你能理解我的意思。基本上，我只添加了一些布尔值，以确保它是否显示。在那之后，我验证它。如果显示为false，则在显示为true之前不能单击。