引导导航栏切换不与下拉菜单同步 [英] Bootstrap navbar toggle not in sync with dropdown menu

问题描述

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

I made my own hamburger animation based of of this codepen: http://codepen.io/dalton/pen/YXZGry

由于我喜欢动画有点慢，我设置：

As I prefer the animation to be a bit slow I set:

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

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

It works fine, i.e. I have a hamburger button, when I toggle I get the single - shaped button and the navbar dropdown menu appears; So hamburger when collapsed, - button when dropdown menu visible. However when I toggle twice fast the navbar dropdown menu appears and stays but the button toggles back to a hamburger (so button 'is out of sync' now). Desired behavior is to have always hamburger when collapsed and - button when not collapsed. How can I solve this?

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

确保快速双击汉堡包的线条

Make sure to quickly double press the lines of the hamburger (somehow in this fiddle the button edges behaves 'separate' from the hamburger...?!).

推荐答案

尝试这个代码（在某些情况下，按钮边缘与汉堡包的行为是分离的 ，它将添加类只有当你的菜单打开和删除它只有当它隐藏。希望它有帮助。

Try this code, it will add class only when your menu is opening and remove it only when it is hiding. Hope it helps.

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

这篇关于引导导航栏切换不与下拉菜单同步的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！