導航欄上的引導下拉菜單不起作用

即使我只是從引導組件頁面複製代碼，導航欄上的此下拉菜單也不起作用。我已經嘗試了許多解決方案，如安排腳本標記和其他東西，但仍然無法正常工作。導航欄上的引導下拉菜單不起作用

<html> 
    <head> 
     <title> This is homepage </title> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> 
     <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
     <link rel="stylesheet" type="text/css" href="<?php echo base_url('css/style.css');?> "> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
     <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"> 
    </head> 
    <body> 
     <nav class="navbar navbar-default navbar-static-top"> 
      <div class="container-fluid"> 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="#"> 
       <img alt="Brand" src="#"> 
       </a> 
      </div> 
      <div class="collapse navbar-collapse" id="navbar-collapse"> 
       <ul class="nav navbar-nav"> 
       <li><a href="#"> Home </a></li> 
       <li><a href="#"> Home </a></li> 
       <li><a href="#"> Home </a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
        <li><a href="#">Link 1</a></li> 
        <li><a href="#">Link 2</a></li> 
        <li role="separator" class="divider"></li> 
        <li><a href="#">Link 3</a></li> 
        <li role="separator" class="divider"></li> 
        <li><a href="#">Link 4</a></li> 
        </ul> 
       </li> 
       </ul> 
       <form class="navbar-form navbar-right" role="search"> 
       <div class="form-group"> 
        <input type="text" class="form-control" placeholder="Type Here To Search"> 
       </div> 
       <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> </button> 
       </form> 
      </div> 
      </div> 
     </nav> 
    </body> 
</html>

你可以看到我已經放了JavaScript，jQuery和CSS的代碼和它仍然無法正常工作。請幫忙。

來源

2016-07-05 Wahyu Handy

在引導js之前加入jquery，然後再試一次，還包括jquery版本1.9.1及以下的版本3. – bhansa

檢查我的答案。 – bhansa

謝謝@Bhansa問題出在jquery的版本中。我試圖將其更改爲jquery 2.2.4及其工作。非常感謝 –

這裏的問題是，您在jquery.min.js之前加載bootstrap.min.js，並且Bootstrap依賴於jQuery。作爲結果，您會在控制檯中看到關於未定義函數的錯誤。根據Bootstrap's bower.json，不支持jQuery版本3。改爲使用版本2. *。

簡單的改變：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

到：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

來源

2016-07-05 14:10:18

我已經切換了這兩個，並且下拉菜單仍然不起作用 –

我更新了我的答案以更改jQuery的版本。嘗試將jQuery的版本更改爲'2.2.4'。 –

是的，我已經試過了。感謝您的回答 –

<html> 
 
    <head> 
 
     <title> This is homepage </title> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 
     <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
 
     <link rel="stylesheet" type="text/css" href="<?php echo base_url('css/style.css');?> "> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 
     <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"> 
 
    </head> 
 
    <body> 
 
     <nav class="navbar navbar-default navbar-static-top"> 
 
      <div class="container-fluid"> 
 
      <div class="navbar-header"> 
 
       <a class="navbar-brand" href="#"> 
 
       <img alt="Brand" src="#"> 
 
       </a> 
 
      </div> 
 
      <div class="collapse navbar-collapse" id="navbar-collapse"> 
 
       <ul class="nav navbar-nav"> 
 
       <li><a href="#"> Home </a></li> 
 
       <li><a href="#"> Home </a></li> 
 
       <li><a href="#"> Home </a></li> 
 
       <li class="dropdown"> 
 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span></a> 
 
        <ul class="dropdown-menu"> 
 
        <li><a href="#">Link 1</a></li> 
 
        <li><a href="#">Link 2</a></li> 
 
        <li role="separator" class="divider"></li> 
 
        <li><a href="#">Link 3</a></li> 
 
        <li role="separator" class="divider"></li> 
 
        <li><a href="#">Link 4</a></li> 
 
        </ul> 
 
       </li> 
 
       </ul> 
 
       <form class="navbar-form navbar-right" role="search"> 
 
       <div class="form-group"> 
 
        <input type="text" class="form-control" placeholder="Type Here To Search"> 
 
       </div> 
 
       <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> </button> 
 
       </form> 
 
      </div> 
 
      </div> 
 
     </nav> 
 
    </body> 
 
</html>

來源

2016-07-05 14:15:59 bhansa

我知道你已經在上面的評論中寫過關於它的內容，但是你能否提供一個關於你從OP發佈的代碼中做出什麼改變的評論？ – PakkuDon

@PakkuDon我知道這就是爲什麼我在評論本身提到，但他仍然沒有得到解決方案，所以我必須提供片段。 – bhansa

@bhansa非常感謝您的回答。我已經在上面編輯了我的評論，但您已經發布了代碼段：D ，我已經在下面發佈了我的答案 –

的問題是jQuery的版本內。我試過把它改成

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

和它的工作。非常感謝你。

來源

2016-07-05 14:24:27

導航欄上的引導下拉菜單不起作用

回答

相關問題