Bootstrap 导航栏切换与下拉菜单不同步

Question

我根据这个 codepen 制作了自己的汉堡包动画： http://codepen.io/dalton/pen/YXZGry

因为我更喜欢动画有点慢，所以我设置了：

  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;

它工作正常，即我有一个汉堡包按钮，当我切换时我得到单形按钮并出现导航栏下拉菜单；所以折叠时的汉堡包， - 下拉菜单可见时的按钮。但是，当我快速切换两次时，导航栏下拉菜单会出现并保持不变，但按钮会切换回汉堡包（因此按钮现在“不同步”）。期望的行为是在折叠时总是有汉堡包，在不折叠时总是有 - 按钮。我该如何解决这个问题？

这是小提琴： https://jsfiddle.net/musicformellons/w75b4rdf/6/

确保快速双击汉堡包的线条（不知何故，在这个小提琴中，按钮边缘与汉堡包“分开”......？！）。

Answer 1

试试这个代码，它只会在你的菜单打开时添加类，只有在隐藏时才删除它。希望能帮助到你。

$(document).ready(function () {
    $('#navbar').on('show.bs.collapse', function () {
        $('#nav-icon4').addClass('open');
    });
    $('#navbar').on('hide.bs.collapse', function () {
        $('#nav-icon4').removeClass('open');
    });
});

Answer 2

可以使用汉堡菜单按钮上的点击跟踪器进行控制。将data-clicked = 0 设置为您的按钮并在每次单击时增加它。神奇的部分是您必须禁用对某些点击跟踪器情况的任何更改。 当跟踪器显示整数 1 时，始终进行汉堡菜单转换。

HTML

<button class=".menuBtn">Menu Button</button>

jQuery

var btn = $('.menuBtn');
btn.click(function()) {
if ($(this).attr('data-clicked') == 0) {
    // toggle menu
}
else {
    // Do Nothing
}
}.promise().done(function(){btn.attr('data-clicked', 1)});