Question

在移动设备上查看时，折叠的导航栏会在点击时展开。但是当我再次点击它时它不会关闭。这是HTML代码：

<nav id="main-nav" class="main-nav navbar-right" role="navigation">
  <div class="navbar-header">
    <button class="navbar-toggle" type="button" 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>
    <!--//nav-toggle-->
    </div>
    <!--//navbar-header-->
 <div class="navbar-collapse collapse" id="navbar-collapse">
  <ul class="nav navbar-nav">
    <li class="active nav-item"><a class="scrollto" href="index.html">Home</a></li>
    <li class="nav-item"><a class="scrollto" href="project.html">Project</a></li>
    <li class="nav-item"><a class="scrollto" href="download.html">Download</a></li>
    <li class="nav-item last"><a class="scrollto" href="contact.html">Contact</a></li>
 </ul>
<!--//nav-->
</div>
<!--//navabr-collapse-->
</nav>

CSS：

.header .main-nav .navbar-collapse {
    padding: 0;
}

.header .main-nav .nav .nav-item {
    font-weight: normal;
    margin-right: 46px;
}

.header .main-nav .nav .nav-item.active a {
    color: #dbdada;
    background: none;
}

.header .main-nav .nav .nav-item a {
    color: #fff;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    font-size: 16px;
    padding: 15px 10px;
}

.header .main-nav .nav .nav-item a:hover {
    color: #fff;
    background: none;
}

.header .main-nav .nav .nav-item a:focus {
    outline: none;
    background: none;
}

.header .main-nav .nav .nav-item a:active {
    outline: none;
    background: none;
}

.header .main-nav .nav .nav-item.active {
    color: #dbdada;
}

.header .main-nav .nav .nav-item.last {
    margin-right: 0;
}

我包含了jquery.min.js和bootstrap.min.js，我真的不知道是什么问题。

Answer 1

刚检查了vubao.co的来源并发现了问题。您已经在第168行和第16行中包含了两次jquery文件。 173（在页面源上检查）。删除其中一个文件，它将正常工作。

Answer 2

更改第一行

ST

而不是

<nav id="main-nav" class="main-nav navbar-right" role="navigation">

Bootstrap Navbar展开后折叠未关闭

2 个答案: