导航栏上的引导下拉菜单不起作用

问题描述：

即使我只是从引导组件页面复制代码，导航栏上的此下拉菜单也不起作用。我已经尝试了许多解决方案，如安排脚本标记和其他东西，但仍然无法正常工作。导航栏上的引导下拉菜单不起作用

<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的代码和它仍然无法正常工作。请帮忙。

在引导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>

我已经切换了这两个，并且下拉菜单仍然不起作用 –

我更新了我的答案以更改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>

我知道你已经在上面的评论中写过关于它的内容，但是你能否提供一个关于你从OP发布的代码中做出什么改变的评论？ – PakkuDon

@PakkuDon我知道这就是为什么我在评论本身提到，但他仍然没有得到解决方案，所以我必须提供片段。 – bhansa

@bhansa非常感谢您的回答。我已经在上面编辑了我的评论，但您已经发布了代码段：D ，我已经在下面发布了我的答案 –

答

的问题是jQuery的版本内。我试过把它改成

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

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

导航栏上的引导下拉菜单不起作用

相关推荐