Question

我想点击标题中的按钮来展开链接列表，但它只会展开，而无法隐藏。我该怎么做才能让它正常工作？

这是我的代码：

<!-- Navbar -->
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">

        <!-- This is where the button to collapse the list is -->
        <a href="#HomePage"><img class="icon" alt="Brand" src="img/icon.ico"></a>
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapseBtn" aria-expanded="false" aria-controls="collapseBtn">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>

      <!-- This is the list I expect to collapse when I hit the button -->
      <div class="collapse navbar-collapse in" id="collapseBtn">
        <ul class="container-fluid nav navbar-nav pull-right">
          <li><a href="#edu"><h4 class="navbar-items">Education</h4></a></li>
          <li><a href="#exp"><h4 class="navbar-items">Experience</h4></a></li>
          <li><a href="#skill"><h4 class="navbar-items">Skills</h4></a></li>
          <li><a href="#contact"><h4 class="navbar-items">Contact Me</h4></a></li>
        </ul>
      </div>
    </div>
  </nav>

Answer 1

你的导航栏崩溃中有in类，导致它保持打开状态，而你的代码工作正常，你可以在下面的小提琴中看到

Fiddle

您需要从in中删除navbar-collapse的类，然后如果您在打开它时遇到问题，可能在加载bootstrap.js之前忘记加载jquery.js。所以在你的bootstrap javascript文件之前你需要加载jquery javascript库。 Bootstrap的javascript工作于jquery，因此您需要首先加载jquery库。所以在bootstrap js脚本链接之前添加：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

然后加载你的bootstrap js文件

<script src="bootstrap.js"></script>

Bootstrap Navbar无法崩溃

1 个答案: