引导导航栏切换无法正常工作答案

【问题标题】：Bootstrap Navbar toogle not working correctly引导导航栏切换无法正常工作
【发布时间】：2015-05-10 21:28:53
【问题描述】：

我在我的 WordPress 主题中使用 Bootstrap 以使其具有响应性。

我的菜单可以正确折叠，但是我的切换按钮变灰并且我无法单击它。

我知道我的脚本正确排队，因为我在查看源代码时可以看到它们，任何人都可以从我的代码中看到原因吗？

<div id="tabs" class="tabs">
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
         <h2 class="brand">LEAVE YOU</h2>
        </div>
        <div id="navbar" class=" collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#example1">Home</a></li>
            <li><a href="#example2">About</a></li>
            <li><a href="#example3">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

【问题讨论】：

除了 bootstraps .js 之外，您还加载了哪些 jquery 库？

标签： jquery html css wordpress twitter-bootstrap

【解决方案1】：

首先，我建议将<nav> 移出<div id="tabs" class="tabs">。但是，要使其正常工作，您只需要链接 jQuery、Bootstrap CSS 和 Bootstrap JavaScript。

如果您没有这些，您可以在<head> 标记中将以下内容添加到您的网站。

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

引导 CSS：<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

引导 JavaScript：<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

【讨论】：