Bootstrap导航栏切换与下拉菜单不同步-Java 学习之路

我根据这个编码器制作了自己的汉堡包动画：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/

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

2 回答

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

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

回复于 2024-04-20T11:40:33+08:00

1
可以使用汉堡菜单按钮上的点击跟踪器进行控制 . 将 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)});
```
回复于 2024-04-20T11:40:33+08:00

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

2 回答

相关问题