logo标签列表

Bootstrap 3中的导航栏下拉菜单

javascriptjqueryhtmlcsstwitter-bootstrap
4

我最近开始学习和使用Bootstrap 3。我想从简单的东西开始-一个头部和一个下拉菜单栏。我使用了Bootstrap网站上的代码。

我从基本的Bootstrap模板开始，然后添加了Bootstrap导航栏。这是我的目前的代码。

<!DOCTYPE html>
<html>
  <head>
    <title>WEBSITE NAME</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

<h1>WEBSITE NAME</h1>

    <nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Tutorials</a></li>
      <li><a href="#">Software</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></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><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>
    <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="https://twitter.com/"><span class="glyphicon glyphicon-comment"></span> Twitter</a></li>
      <li><a href="https://youtube.com/"><span class="glyphicon glyphicon-facetime-video"></span> YouTube</a></li>
        </ul>
      </li>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

下拉菜单完全不起作用，无论是悬停还是点击都不行。我需要做什么？
编辑：我使用Safari Web Inspector并且资源“jquery.js”显示为红色（表示缺失）。这来自以下代码：
我是根据Bootstrap网站上的默认基本页面编写的。 我不知道要更改路径以纠正它。提供的项目文件夹中没有'jquery.js' 文件。
Bootstrap和Bootstrap 3(.2.3)之间有很多变化。始终检查类是否包含在您的CSS文件中。现在不确定是否为此情况，但值得检查。 - BlueCacti
4个回答
1

成功！

我注意到在Safari网络检查器中，'code.jquery.com/jquery.js'文件无法访问。问题出在这一行代码：

<script src="//code.jquery.com/jquery.js"></script>

文件无法访问。某些原因导致http:部分丢失。将代码更改为：
<script src="http://code.jquery.com/jquery.js"></script>

问题已经解决！太好了！

额外说明：我认为，如果这是在线运行而不是本地运行，http: 部分将不是必需的。

3
正如您所说，“http:”并没有“缺失”，这是所谓的“协议无关引用”。它被用于确保如果您当前正在查看的页面是 http 页面，则资产将通过 http 加载，如果您正在查看 https 页面，则将通过 https 加载（从而避免混合内容警告）。由于您在“file:///" URL 上查看页面，因此会导致问题... - Phil Parker
0
我将这个确切的文件加载到我的本地WAMP服务器上，一切都完美无误： 您可能需要更改页面底部的以下内容： src="http://code.jquery.com/jquery.js" 您的代码没有问题，HTML5 shiv和respond.js与您的菜单不起作用无关...
但是，您可能希望使用Google Chrome并使用检查元素来确保您的引用点正确。
BS3中默认情况下不支持悬停，您可以使用自定义JavaScript来使其正常工作...我在这里使用它：http://thisamericanjourney.com/ 将鼠标悬停在“关于”菜单项上： //这允许用户在不单击菜单的情况下悬停在菜单上。
   $(function() {


$('ul.nav li.dropdown').hover(function() {
    $('.dropdown-menu', this).fadeIn('fast');
}, function() {
    $('.dropdown-menu', this).fadeOut('fast');
});

    });
我所有的文件都在我的电脑上（本地）。我把所有东西放在“dist”文件夹里。有三个文件夹，css、fonts和js，还有我的“index.html”文件。顺便说一句，我使用Safari网页浏览器。 - user2333842
你建议我对 '<script src="//code.jquery.com/jquery.js"></script>' 这行代码做什么？ - user2333842
是的，完全正确 :-) 这就是我想告诉你的......很高兴看到你把它搞定了！我在这里的帖子中试图告诉你：您可能需要更改页面底部的src="http://code.jquery.com/jquery.js"为jQuery的绝对路径 :-) - WebDev67
大家好，我遇到了几乎相同的问题！在最新版本的Chrome浏览器中，下拉菜单无法正常工作，但在Safari浏览器中可以正常使用:( - Cmag
0

这个部分：

<ul class="nav navbar-nav navbar-right">
  <li><a href="https://twitter.com/"><span class="glyphicon glyphicon-comment"></span> Twitter</a></li>
  <li><a href="https://youtube.com/"><span class="glyphicon glyphicon-facetime-video"></span> YouTube</a></li>
    </ul>
  </li>
</ul>

有一个额外的 </ul> 和 </li> - 这可能不是导致您问题的原因，但也不会有帮助...

0

我删除了“html5shiv”和“respond.min”的引用后，运行了您的代码，并且下拉菜单可以正常工作。我怀疑jQuery和Bootstrap JS文件的路径可能被错误地指定了。

你具体是指哪个部分？ - user2333842
@user2333842 底部的 "src" 引用。它们指向正确的路径吗？ - Lloyd Banks
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接