【问题标题】:Bootstrap dropdown on navbar doesn't work导航栏上的引导下拉菜单不起作用
【发布时间】:2016-11-07 10:01:16
【问题描述】:

即使我只是从引导组件页面复制代码,导航栏上的这个下拉菜单也不起作用。我已经尝试了很多解决方案,比如安排脚本标签和其他东西,但仍然不起作用。

<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 问题出在 jquery 的版本中。我尝试将其更改为 jquery 2.2.4 及其工作。非常感谢
  • 如果您的问题得到了正确的回答,您应该勾选任何已回答的答案,以便我们可以关闭此问题。
  • @Bhansa 我已经发布了我的答案,但是直到 2 天我才能勾选自己的答案,所以我在下面的 Raphael Rafatpanah 上勾选了答案。顺便说一句,感谢您回答这个问题。

标签: html twitter-bootstrap


【解决方案1】:

这里的问题是您在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
  • @Lee 这个正在工作,我已经尝试过并且正在工作。抱歉我的模棱两可的评论
【解决方案2】:

<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>

【讨论】:

  • 我知道您已经在上面的 cmets 中写过它,但是您能否评论一下您对 OP 发布的代码所做的更改?
  • @PakkuDon 我知道这就是我在评论中提到的原因,但他仍然没有得到解决方案,所以我必须提供 sn-p。
  • @bhansa 非常感谢您的回答。我已经在上面编辑了我的评论,但你已经发布了代码 sn-p :D 我已经在下面发布了我的答案
【解决方案3】:

问题出在 jquery 的版本中。我尝试将其更改为

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

及其工作。非常感谢。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-05-24
    • 1970-01-01
    • 2015-09-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多