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;

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

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

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

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

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

2 个答案: