jquery - 为什么导航栏折叠不起作用？

Question

我很困惑应该使用哪些代码，不应该使用哪些代码。所以我只是将网站放入保管箱并在此处发布链接。

http://shaylakarzon.kissr.com/nav/index.html

请检查导航栏。它具有响应能力，但在窗口较小时不起作用。

我搞砸了一些事情。我的导航栏在单一时工作正常。但是当我试图用我的 slider 调整它时它会产生问题。在小型设备布局中，当我单击 sr-only 按钮时它会显示菜单，但如果我再次单击 sr-only 按钮，菜单不会返回。

代码

        <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
                    <span class="sr-only">toggle Navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
        </div>  <!-- container-fluid  -->
        <div class="collapse navbar-collapse" id="navbar-collapse">
          <ul class="nav navbar-nav" id="navbar-scroll">
              <li class="active"><a href="">Home</a></li>
              <li><a href="">Blog</a></li>
              <li><a href="">About Us</a></li>
              <li><a href="">Contact Us</a></li>
          </ul>
            <div class="navbar-right login_poopup">
                <p id="login_poopup"><a>Login<span class="caret"></span> </a></p>     
            </div>
        </div>

    </nav>

Answer 1

在链接 bootstrap css 文件链接之前链接了通用 jquery 文件链接 像这样。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">