Question

我正在使用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，但在这之后我仍然无法让它工作。在此先感谢您的帮助！我在这方面很新，只是不确定我做错了什么。

Answer 1

打开你的jsFiddle你会发现你收到以下错误：

E/dalvikvm: Could not find class 'android.app.Application$OnProvideAssistDataListener', referenced from method .App.access$super 
E/dalvikvm: Could not find class 'android.app.Application$OnProvideAssistDataListener', referenced from method .App.access$super 
E/dalvikvm: Could not find class 'android.util.ArrayMap', referenced from method com.android.tools.fd.runtime.MonkeyPatcher.monkeyPatchExistingResources
E/dalvikvm: Could not find class 'android.util.ArrayMap', referenced from method com.android.tools.fd.runtime.MonkeyPatcher.pruneResourceCache 
E/dalvikvm: Could not find class 'android.os.PersistableBundle', referenced from .ui.module.main.SplashActivity.access$super 
E/dalvikvm: Could not find class 'android.os.PersistableBundle', referenced from method com.zhengjin99.olivefortune.ui.module.main.SplashActivity.access$super 
E/dalvikvm: Could not find class 'android.media.session.MediaController', referenced from method .ui.module.main.SplashActivity.access$super 
E/dalvikvm: Could not find class 'android.widget.Toolbar', referenced from method .ui.module.main.SplashActivity.access$super 
E/dalvikvm: Could not find class 'android.app.ActivityManager$TaskDescription', referenced from method .ui.module.main.SplashActivity.access$super 04-23 
E/dalvikvm: Could not find class 'android.app.SharedElementCallback', referenced from method .ui.module.main.SplashActivity.access$super 
E/dalvikvm: Could not find class 'android.os.PersistableBundle',
CrashHandler.uncaughtException: Ohooo
FATAL EXCEPTION: main java.lang.NoClassDefFoundError:packagename.ui.module.main.AssetAllocationFragment

您收到该错误是因为jQuery是一个Bootstrap依赖项，因此您必须确保正确加载它。

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

<强> Working fiddle

附加说明：

如果您需要在html页面中加载Bootstrap和jQuery，而不是在jsfiddle中，则必须链接html页面中bootstrap.min.js:6 Uncaught ReferenceError: jQuery is not defined标记内的相应资源。

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

<head>

重要事项：确保按照确切的顺序包含js文件，首先是jQuery然后是Bootstrap。

Answer 2

试试这个

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Navbar Mockup</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>

    </div>  </div>
</nav>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  </body>
</html>

`

难以让导航栏工作

2 个答案: