Bootstrap 3 导航栏展开但不会折叠 [英] Bootstrap 3 Navbar Expands but will not Collapse

问题描述

我正在尝试在 Bootstrap 3 中实现响应式导航栏.大部分情况下，一切都在起作用.酒吧甚至正确扩展.然后，当我再次按下响应式折叠按钮时，栏会折叠大约一半，然后又下降.

这将验证 Javascript 是否已就位，并且 CSS 是否也已正确就位.我不知道这怎么可能发生.即使在 Plunkr 中它也有效，但在我的项目中无效.有任何想法吗?

<div class="容器"><button type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse" class="navbar-toggle collapsed"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a href="#" class="navbar-brand">标题</a><div style="height: 0px;"class="nav-collapse navbar-responsive-collapse collapse"><ul class="nav navbar-nav"><li class="active"><a href="#">首页</a></li><li><a href="#">链接</a></li>

解决方案

结果证明我包含了一个重复的编译 Javascript 并且与事件侦听器有一些混淆，所以它有问题.固定.

I'm trying to implement a responsive navbar in Bootstrap 3 Things have been working for the most part. The bar even expands correctly. Then, when I press the responsive collapse button again the bar collapses about halfway and then drops back down.

This verifies that the Javascript is in place and that the CSS is in place correctly as well. I don't know how else this could be happening. Even in Plunkr it works, but not in my project. Any ideas?

<div class="navbar">
   <div class="container">
      <button type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse" class="navbar-toggle collapsed">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand">Title</a>
      <div style="height: 0px;" class="nav-collapse navbar-responsive-collapse collapse">
         <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Link</a></li>
         </ul>
      </div>
   </div>
</div>

解决方案

It turns out that I included a duplicate compiled Javascript and that there was some mixup with event listeners and so it was being buggy. Fixed.

这篇关于Bootstrap 3 导航栏展开但不会折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！