导航栏无法正常工作

debugcn 发表于 Dev

雷切尔·艾德曼（Rachel Addleman）

我正在使用Bootstrap开发导航栏，但无法使下拉菜单正常工作。我正在使用JSFiddle对其进行测试

~~https://jsfiddle.net/addlemanrachel/n9m8fjm8/#&togetherjs=nhtT9oahiE~~编辑：错误的链接！正确的链接是： https : //jsfiddle.net/addlemanrachel/n9m8fjm8/。

这是HTML：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-left">
          <li><a href="#"><i class="fa fa-home"></i></a></li>
          <li class="dropdown active">
            <a href='#' class="dropdown-toggle" data-toggle="dropdown">Community</a>
            <ul class="dropdown-menu">
              <li><a href="#">Recent Activity</a></li>
              <li><a href="#">Member Activity</a></li>
              <li><a href="#">Member List</a></li>
              <li><a href="#">Member Groups</a></li>
            </ul>
          </li>
          <li><a href="#">Pet Help</a></li>
          <li><a href="#">Pets for Sale</a></li>
          <li><a href="#">Pet Services</a></li>
        </ul>
      </div>
      <button type="button" class="navbar-toggle" 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>
</div>

起初我以为我的问题不是链接jQuery，但是这样做之后我仍然无法使它正常工作。在此先感谢您的帮助！我在这方面很新，只是不确定自己在做什么错。

bid

打开jsFiddle，您会看到以下错误：

bootstrap.min.js:6 Uncaught ReferenceError: jQuery is not defined

因为jQuery是Bootstrap依赖项，所以会出现该错误，因此必须确保正确加载了它。

您提供的jsfiddle中包括jQuery v2.2.3现在可以正常工作

工作小提琴

补充说明：

如果您需要在html页面而不是jsfiddle中加载Bootstrap和jQuery，则必须在html页面中的<head>标记内链接相应的资源。

例如，使用MaxCDN链接，您可以使用以下代码：

<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>
 <!-- html code ...-->
</body>

重要信息：确保以正确的顺序包含js文件，首先是jQuery，然后是Bootstrap。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。