javascript - Bootstrap 导航栏在未折叠时闪烁

Question

Plunkr

默认情况下，如果您单击菜单项， Bootstrap 导航栏菜单不会在小屏幕上折叠。

我在每个菜单项中添加了data-toggle="collapse" 和data-target="#navbar-collapse"，这样当菜单出现时菜单就会折叠起来元素被选中。

到目前为止一切顺利，但我注意到即使屏幕很大也会闪烁，并且导航栏元素不在三明治菜单中。我猜是折叠动画。

我的问题是有什么方法可以防止这种闪烁/禁用 CSS 动画吗？我知道我可能会用 jQuery 取消动画，但我宁愿避免这种情况，因为整个应用程序都是用 Angular 构建的，而且我认为这不是一个罕见的用例。

Answer 1

希望这对您已有的代码不是多余的，但您没有提到它，所以我假设您没有。

让你的主 div 成为 navbar navbar-default 然后在里面放一个 container-fluid div，然后把它放在后面:

<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navBodyId" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Page Title</a>
</div>

然后你可以像这样拥有你的导航栏:

<div class="collapse navbar-collapse" id="navBodyId">
  <ul class="nav navbar-nav">
   ...
  </ul>
</div>

然后关闭我在顶部提到的那两件事。

您不必折叠菜单的每个部分。希望这有帮助，如果没有，Bootstrap 网站是一个非常好的资源，他们在下面有一堆带有源代码的例子，但我相信你知道这一点。