Bootstrap NavBar Responsive Weirdness

Question

我有一个使用Boostrap 3.2的页面。当我重新调整窗口大小（chrome）来触发响应式设计时，导航栏的行为非常奇怪。它可以工作一次，但任何后续的呼叫都不起作用。

奇怪的是，我不能得到表现在的jsfiddle相同的方式。所以，我要提出的Dropbox的链接

https://dl.dropboxusercontent.com/u/3740186/test/publications.html

的HTML的导航栏

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
      <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="./Index.html"> 
      <img src="./images/logo_big.png" width="30" height="30" title="PIT" alt="PIT" /> 
      Test Pitt 
     </a> 
     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li> 
      <a href="./publications.html">Home</a> 
      </li> 
      <li> 
      <a href="./publications.html">Members</a> 
      </li> 

      <li> 
      <a href="./publications.html">Research</a> 
      </li> 

      <li> 
      <a href="./publications.html">Publications</a> 
      </li> 

      <li class="active"> 
      <a href="./publications.html">Teaching</a> 
      </li> 
     </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container --> 
    </nav> 

感谢

Answer 1

也有一些是错误的与您在结束脚本。

$('.collapse').on('shown.bs.collapse', function (e) { 
    $("#" + e.target.id.replace("abs_", "btn_")).html("<span class=\"glyphicon glyphicon-collapse-up\" aria-hidden=\"true\"></span> &nbsp; Hide Abstract"); 
}); 

$('.collapse').on('hidden.bs.collapse', function (e) { 
    $("#" + e.target.id.replace("abs_", "btn_")).html("<span class=\"glyphicon glyphicon-collapse-down\"aria-hidden=\"true\"></span> &nbsp; Show Abstract"); 
}); 

您这些事件添加到所有.collapse元素，包括你的菜单时的尺寸重新调整窗口。