javascript - Bootstrap 4 : Disable button until modal animation is done

Question

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

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

有什么方法可以在模式动画准备好之前禁用按钮吗？

这是我的代码:

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

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

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

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

这是我的实际代码:https://codepen.io/cray_code/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)

Demo