堆棧內存溢出
  簡體   English   中英

Bootstrap導航欄下拉框不顯示下拉菜單

[英]Bootstrap navbar dropbox does not show dropdown menu

 原文  2014-01-11 15:32:25  0   2    javascript/ jquery/ html/ css/ twitter-bootstrap

問題描述

我已經閱讀了關於導航欄中dropdown box stackoverflow上的多個線程，但沒有一個被證明對我的問題有所幫助。

我正在使用引導程序版本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文件中下載了不同的js和css文件。 即使在進行了大量故障排除之后，我還是可以正常工作的，當時腳本標記的順序是錯誤的。

根據bootstrap網站，除了崩潰插件依賴於過渡插件（因此，將其放置在崩潰插件之前）之外， jquery插件是必需的。 然后是dropdown js和引導程序，以及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在他的一份答復中寫的代碼替換所有導入，這與示例站點上的代碼相同。

這是瀏覽器呈現頁面時的外觀： 在此處輸入圖片說明

在站點上運行調試器后，我得到了這些警告/錯誤，但是當訪問引導站點本身時，我也得到了很多警告/錯誤，因此我不知道它們是否與實際問題有關： 

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

2 個解決方案

解決方案1
 0  2014-01-11 16:09:08

請嘗試使用引導程序提供的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 ，這會引起問題。 還放入適當的doctype和元視口 

<!DOCTYPE html>
<html>
  <head>

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

    ... rest of your code

解決方案2
 0  

我終於讓它工作了。 這是dropdown.js文件和另一個javascript文件（可能是bootstrap.js）之間的沖突。 當我刪除dropdown.js時，該下拉菜單應能正常工作。 該文檔沒有說您需要dropdown.js才能使navbar正常工作，但是如果您想在網站上的某個地方單獨放置下拉菜單，則navbar的下拉菜單將停止工作，因為好像您無法同時擁有bootstrap.js和dropdown.js同時導入有點麻煩，因為無論如何我總是需要bootstrap.js ..從ive找到的結果來看，在導入時都禁用了下拉菜單，而沒有任何警告消息..有些地方說bootstrap已經包含了dropdown的功能但我不確定..這也是一個有趣的讀法， Bootstrap Dropdown不起作用-Dropdown 不能切換

現在，在bootstrap.js中，我看到它們實現了似乎具有的所有javascript的功能，但我在文檔中沒有看到它們已完成的功能，但是如果您嘗試導入它，並非所有文件似乎都存在沖突。分別。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何使用引導程序顯示另一個導航欄而不是下拉菜單 引導導航欄下拉菜單不起作用 Bootstrap導航欄下拉菜單定位 Bootstrap Navbar折疊下拉菜單 Bootstrap導航欄下拉菜單/折疊的導航欄未打開 Bootstrap：下拉導航欄菜單中的登錄表單 Bootstrap導航欄切換與下拉菜單不同步 Bootstrap 4-下拉菜單-元素在導航欄上 Bootstrap 4 下拉菜單在導航欄下方彈出 導航欄下拉菜單（使用引導程序）不起作用
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM