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)});