Bootstrap 4：禁用按钮直到模态动画完成答案

【问题标题】：Bootsrap 4: Disable button until modal animation is doneBootstrap 4：禁用按钮直到模态动画完成
【发布时间】：2019-11-26 00:40:37
【问题描述】：

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

问题是，如果您点击快速并且模态动画尚未准备好，按钮会变得混乱并显示 X，即使在已经关闭的菜单/模态中也是如此。

有没有办法在模态动画准备好之前禁用按钮？

这是我的代码：

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

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

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

但我不知道如何在我的函数中实现它。

这是我的实际代码：https://codepen.io/cray_code/pen/JjjqRpN

【问题讨论】：

标签： javascript jquery html css bootstrap-4

【解决方案1】：

您可以将汉堡的切换与显示/隐藏模式事件联系起来..

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

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

Demo

【讨论】：

很好，谢谢。这几乎是完美的。还有一段时间会发生变化，但变化不大

【解决方案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");
    });

对不起，如果代码有点乱，但我希望你能理解我的意思。基本上我只放了一些布尔值来确保它的显示与否。之后我验证它。如果 isshown 为 false，则在 isshown 为 true 之前您无法点击。

【讨论】：

抱歉，我不明白如何在点击按钮上添加.active 类？！