导航栏切换按钮打开然后立即关闭

Question

我有一个网站使用 Bootstrap.

当 window 大小缩小到移动设备时，导航栏菜单会正确地折叠成通常的汉堡包（三条纹）按钮。

我的问题是，当我单击此按钮打开菜单时，它会打开，但随后又立即折叠起来。

Answer 1

问题在于打开机制，而不是关闭机制：

它只在第二次点击时关闭，但由于导航栏的高度 = 0，因此在第一次点击时永远不会打开。您的网站上有特殊的 JS 或 CSS 运行吗？

如果不是，请找到两个可能且可能的解决方案in this post。第一个答案是解决方案。第二个是针对你的问题的建议。

此外，数据目标属性以 . ，不确定您是否打算这样做（只是观察）

祝你好运

Answer 2

我使用的是 bootstrap 2.x CSS 文件，以及 bootstrap 3.xjs文件.

Answer 3

我也遇到了这个问题，并通过更新我的 bootstrap link 修复了它。

Answer 4

我将我的 .navbar-toggler 按钮作为 .navbar-brand 的子元素，这导致在单击切换器按钮时立即 open/close 导航链接。将按钮移动为兄弟元素解决了这个问题。愚蠢的错误，很容易修复。

Answer 5

当触发点击以打开菜单但未删除 collapse class 时添加 in class。添加此 css 以覆盖 collapse 属性对我有用：

.navbar-collapse.in {
    display: block !important;
}

Answer 6

添加这 3 个文件.. 因为为了 bootstrap 工作，您还需要在代码中添加 javascript 和 jquery。

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

导航栏切换按钮打开然后立即关闭

Navbar toggle button opens then immediately closes

navbar

twitter-bootstrap