Question

我已经在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">

我从js文件中下载了不同的css和jquery个文件。我之前得到了这个工作，但现在甚至在经过大量的故障排除之后，当时脚本标签的顺序都是错误的。

根据引导程序网站，除了依赖于转换插件的崩溃插件之外，jquery插件是必需的（因此它位于崩溃插件之前）。除了dropdown js文件之外，还有css和bootstrap。

我无法弄清楚为什么这不起作用。问题是，当我点击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

在网站上运行调试器后我得到了这些警告/错误，但在访问引导站点本身时我也得到了很多这些，所以我不知道它们是否与实际问题有关：

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

Answer 1

尝试使用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>

另外，仔细检查你的navbar html标记是否正确。下拉菜单是另一个嵌入组成导航栏的更高级别ul / li的UL。

最后，您的<html>标记看起来像<html，这会导致问题。还要放入适当的doctype和meta视口

<!DOCTYPE html>
<html>
  <head>

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

    ... rest of your code

Answer 2

我终于开始工作了。这是dropdown.js文件和另一个javascript文件之间的冲突，可能是bootstrap.js。当我删除dropdown.js时，下拉列表正常工作。文档并没有说你需要dropdown.js来使导航栏工作，但如果你想在你的网站上的某个地方单独下拉，那么你的导航栏'下拉列表将停止工作，因为你似乎不能同时拥有bootstrap.js和dropdown.js因为你总是需要bootstrap.js同时导入，因为你总是需要bootstrap.js ..从我发现的东西，当导入两个下拉列表被禁用而没有任何警告消息..有些地方它说bootstrap已经包含下拉列表的功能但我不确定..这也是一本有趣的读物Bootstrap Dropdown not working - Dropdown doesn't toggle

在bootstrap.js中我现在看到他们实现的功能似乎是他们拥有的所有javascripts，我在文档中没有看到他们已经这样做了，但是如果你尝试的话，并非所有文件都是冲突的单独导入它。

Bootstrap导航栏保管箱不显示下拉菜单

2 个答案: