javascript - Bootstrap 导航栏下拉框不显示下拉菜单

标签 javascript jquery html css twitter-bootstrap

我已经阅读了 stackoverflow 上关于导航栏中的 dropdown box 的许多线程,但没有一个对我的问题有帮助。

我使用的是 bootstrap 版本 3,我使用的是官方网站上提供的 navbar 示例:

  http://getbootstrap.com/components/#navbar

我使用的代码与该站点上的代码完全相同,我包括以下 javascript 和 css 文件:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="static/js/transition.js"></script>
<script type="text/javascript" src="static/js/collapse.js"></script>
<script type="text/javascript" src="static/js/dropdown.js"></script>
<script type="text/javascript" src="static/js/bootstrap.js"></script>
<link rel="stylesheet" href="static/css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="static/css/footer.css" type="text/css">

除了 jquery 文件,我还下载了不同的 jscss 文件。 我之前可以正常工作,但现在即使经过大量故障排除也无法正常工作,当时脚本标签的顺序是错误的。

根据 bootstrap 网站,jquery 插件是必需的,此外折叠插件依赖于转换插件(因此它位于折叠插件之前)。然后是 dropdown js 和 bootstrap,还有 css 文件。

我不明白为什么这不起作用。问题是,当我单击 dropdown 框时,它根本不显示菜单,没有任何反应。我尝试了很多不同的配置,但没有任何效果。

我正在使用这段代码:

     <html
     <head>
         <title>testing</title>
         <script src="http://code.jquery.com/jquery-latest.js"></script>
         <script type="text/javascript" src="static/js/transition.js"></script>
         <script type="text/javascript" src="static/js/collapse.js"></script>
         <script type="text/javascript" src="static/js/dropdown.js"></script>
         <script type="text/javascript" src="static/js/bootstrap.js"></script>
         <link rel="stylesheet" href="static/css/bootstrap.css" type="text/css">
        <link rel="stylesheet" href="static/css/footer.css" type="text/css">
    </head>
    <body>
    <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="#bs-example-navbar-collapse-1">
          <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>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</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 class="divider"></li>
              <li><a href="#">Separated link</a></li>
              <li class="divider"></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="#">Link</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 class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </nav>
    </body>
    </html>

我还尝试用 erikrunia 在他的一个回复中写的代码替换所有导入,这也与示例站点上的相同。

这是浏览器呈现页面时的样子: enter image description here

在站点上运行调试器后,我收到了这些警告/错误,但在访问 Bootstrap 站点本身时我也收到了很多这样的警告/错误,所以我不知道它们是否与实际问题有关:

18:23:45.672 file:///Users/exceed/index.html
18:23:45.673 file:///Users/exceed/static/js/jquery.js
18:23:45.674 file:///Users/exceed/static/js/transition.js
18:23:45.674 file:///Users/exceed/static/js/collapse.js
18:23:45.675 file:///Users/exceed/static/js/dropdown.js
18:23:45.675 file:///Users/exceed/static/js/bootstrap.js
18:23:45.676 file:///Users/exceed/static/css/bootstrap.css
18:23:45.676 file:///Users/exceed/static/css/footer.css
18:23:45.643 Unknown property 'box-sizing'.  Declaration dropped. bootstrap.css:93
18:23:45.643 Unknown property 'box-sizing'.  Declaration dropped. bootstrap.css:195
18:23:45.643 Unknown property 'box-sizing'.  Declaration dropped. bootstrap.css:201
18:23:45.643 Unknown pseudo-class or pseudo-element '-webkit-search-cancel-button'.  Ruleset ignored due to bad selector. bootstrap.css:205
18:23:45.644 Unknown property 'box-sizing'.  Declaration dropped. bootstrap.css:306
18:23:45.644 Expected color but found 'auto'.  Expected color but found '-webkit-focus-ring-color'.  Expected end of value but found '-webkit-focus-ring-color'.  Error in parsing value for 'outline'.  Declaration dropped. bootstrap.css:344
18:23:45.645 Unknown property 'box-sizing'.  Declaration dropped. bootstrap.css:1882
18:23:45.645 Expected end of value but found '\9 '.  Error in parsing value for 'margin-top'.  Declaration dropped. bootstrap.css:1888
18:23:45.645 Expected color but found 'auto'.  Expected color but found '-webkit-focus-ring-color'.  Expected end of value but found '-webkit-focus-ring-color'.  Error in parsing value for 'outline'.  Declaration dropped. bootstrap.css:1913
18:23:45.645 Unknown pseudo-class or pseudo-element '-webkit-outer-spin-button'.  Ruleset ignored due to bad selector. bootstrap.css:1917
18:23:45.645 Unknown pseudo-class or pseudo-element '-ms-input-placeholder'.  Ruleset ignored due to bad selector. bootstrap.css:1965
18:23:45.645 Unknown pseudo-class or pseudo-element '-webkit-input-placeholder'.  Ruleset ignored due to bad selector. bootstrap.css:1969
18:23:45.646 Unknown property 'user-select'.  Declaration dropped. bootstrap.css:2262
18:23:45.646 Expected color but found 'auto'.  Expected color but found '-webkit-focus-ring-color'.  Expected end of value but found '-webkit-focus-ring-color'.  Error in parsing value for 'outline'.  Declaration dropped. bootstrap.css:2267
18:23:45.646 Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:2291
18:23:45.647 Expected 'none' or URL but found 'progid'.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:3555
18:23:45.650 Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:5459
18:23:45.650 Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:5460
18:23:45.650 Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:5476
18:23:45.650 Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:5477
18:23:45.650 Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:5487
18:23:45.650 Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:5488
18:23:45.650 Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:5498
18:23:45.650 Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:5499
18:23:45.650 Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:5509
18:23:45.650 Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:5510
18:23:45.650 Unknown property 'zoom'.  Declaration dropped. bootstrap.css:5518
18:23:45.651 Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:5964
18:23:45.651 Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:5973
18:23:45.651 Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:6049
18:23:45.651 Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:6054
18:23:45.651 Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:6136
18:23:45.651 Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:6142
18:23:45.651 Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:6454
18:23:45.651 Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:6458
18:23:45.651 Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:6459
18:23:45.651 Expected 'none' or URL but found 'progid'.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:6463
18:23:45.651 Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:6469
18:23:45.651 Error in parsing value for 'background-image'.  Declaration dropped. bootstrap.css:6470
18:23:45.651 Expected 'none' or URL but found 'progid'.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:6474
18:23:45.651 Expected 'none' or URL but found 'alpha('.  Error in parsing value for 'filter'.  Declaration dropped. bootstrap.css:6482
18:23:45.651 Expected end of value but found '\9 '.  Error in parsing value for 'background-color'.  Declaration dropped. bootstrap.css:6541
18:23:45.658 TypeError: $(...).on is not a function collapse.js:160
18:23:45.659 TypeError: $(...).on is not a function dropdown.js:149
18:23:45.661 TypeError: $(...).on is not a function bootstrap.js:163
18:23:45.662 The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol. index.html

最佳答案

尝试使用 bootstrap 提供的 CDN 链接而不是您的导入来确定是您的标记导致问题还是您的 JS 导入。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">


<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

另外,请仔细检查您的导航栏 html 标记是否正确。下拉菜单是嵌入构成导航栏的更高级别 ul/li 中的另一个 UL。

最后,您的 <html>标签看起来像 <html ,这会导致问题。还要放入适当的文档类型和元视口(viewport)

<!DOCTYPE html>
<html>
  <head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    ... rest of your code

关于javascript - Bootstrap 导航栏下拉框不显示下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21064146/

相关文章:

php - 使用 PHP 将制表符转换为空格以供 HTML 显示?

javascript - 为数组中的所有对象添加属性

javascript - child_process.spawn() 不等待子 Node 进程完成

jquery - 动画完成后使用 JQuery 更改 CSS

javascript - 使用 append() 添加元素并设置其 id

javascript - 如何在html或js中为博客添加 'Load More..'选项?

javascript - 我想在其他样式表和正文加载之前首先在 Html 中加载特定样式表。怎么做?

javascript - jQuery 显示/隐藏在 WordPress 中不起作用

javascript - 如何使用 requireJs 缓存获取调用的结果?

javascript - HTML5 语音合成 API - 只能使用 "native"语音