Bootstrap下拉菜单不起作用

79

我无法使Bootstrap下拉菜单正常工作。这是我的导航的html：

<ul class='nav'>
  <li class='active'>Home</li>
  <li class='dropdown'>
    <a class="dropdown-toggle" data-toggle="dropdown" href='#'>Personal asset loans</a>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">asds</a></li>
      <li class="divider"></li>
    </ul>
  </li>
  <li>Payday loans</li>
  <li>About</li>
  <li>Contact</li>
</ul>

这是脚本：

<script type="text/javascript" src="js/bootstrap/bootstrap-dropdown.js"></script>
<script>
     $(document).ready(function(){
        $('.dropdown-toggle').dropdown()
    });
</script>

我究竟做错了什么？感谢您的回答！

html  drop-down-menu  twitter-bootstrap 
— 调节器
source
检查我的答案在类似的帖子 stackoverflow.com/questions/15592158/...
— Tejasvi赫格德
4
我的问题是缺少引导js文件，以防其他人
— 遇到问题
我已经更新了我的工具Gruntfile.js，该工具改变了jsFileList...中的某些路径。更新路径并运行适当的Grunt任务（grunt dev / grunt build /等）解决了我的问题。
— 肯王子
1
@Drewdavid谢谢！我错过了bootstrap.min.js 和 jquery
— lucidbrot

Answers:

12

工作演示：http : //codebins.com/bin/4ldqp73

试试这个 

<ul class='nav'>
  <li class='active'>Home</li>
  <li>
    <div class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans</a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">            
        <li><a href="#">asds</a></li>
        <li class="divider"></li>
      </ul>
    </div>   
    </li>
    <li>Payday loans</li>
  <li>About</li>
  <li>Contact</li>
</ul>
— 高朗171
source
56
演示中的下拉列表似乎不再起作用，或者问题可能出在我的浏览器上。
— 挪亚2015年
150

我有同样的问题。经过数小时的故障排除后，

我有 

<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>

代替，

<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>

希望这可以帮助某人

— 明高亲王
source
1
有什么不同？
— CodyBugstein 2014年
9
Imray，引导脚本将扩展注册到jQuery，因此，如果未加载jQUery，则永远不会注册扩展。
— Amoliski
2
的确，秩序很重要。谢谢您的帮助！
— K.Land_bioinfo
谢谢。也为我在angular.json文件中的angular 10项目工作
— shawon
完美的thx
— Vipertecpro
86

当我包含bootstrap.min.js两次时，我遇到了同样的问题。删除其中之一，它开始工作。

— 库比莱
source
1
这解决了我的问题。我的角应用通过吞气任务拉动引导的多个副本注入我bower_components
— PAKAGE
这解决了我的问题。感谢
— Yudu Ban
这在带有捆绑的ASP.NET MVC 5项目中进行了
— 修复
为我修复。谢谢。
— 亨利
真的很烦...使用aurelia-webpack-skeleton我需要在main.js中导入bootstrap.css，但是如果我导入“ bootstrap”，则会出现这种奇怪的行为……
— 具有讽刺意味的
23

FYI：如果你有bootstrap.js，你应该不加引导，dropdown.js。

我不确定bootstrap.min.js的结果。

— 华氏温度
source
2
谢谢。我同时拥有dropdown.js和bootstrap.js，因此它不起作用。删除dropdown.js可以解决此问题。
— nyxz 2013年
您是伴郎，我花了大约6个小时在此查找问题所在！，再次感谢..
— Adel 2014年
1
先生非常感谢您！我有同样的问题，但我有bootstrap.js和bootstrap.min.js.。当我删除后者时，它可以工作。
1
谢谢-就我而言，我同时js/bootstrap.js拥有js/dropdown.js
— Sanjay Manohar
13

对于您的样式，您需要包括bootstrap的css文件，通常在</head>element之前

<link href="css/bootstrap.css" rel="stylesheet">

接下来，您需要包括js文件，建议在文档末尾（通常在</body>这样页面加载速度更快之前）将它们包括在内。

<script src="js/jquery.js"></script>        
<script src="js/bootstrap.js"></script>
— ÔûssàmâHöûd
source
8

在body标签内添加以下行。

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://code.jquery.com/jquery.js"></script>
  <!-- Include all compiled plugins (below), or include individual files 
        as needed -->
  <script src="js/bootstrap.min.js"></script>
— 谢文·席尔瓦（Shevon Silva）
source
谢谢，这为我节省了一些时间。
— DrewT
7

您必须将此文件导入<head></head>html。

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
— 马丁
source
1
我不知道为什么或做错了什么，但是这个答案对我有用。谢谢马丁！
— dghalbr，2015年
谢谢。我也不知道为什么这也解决了问题。该菜单可以与/js/jquery.js和/js/bootstrap.min.js一起正常工作，直到将网站迁移到另一台Windows服务器为止。
— 年
5

包括在内 jquery.js吗？

另外，将此代码行与您的代码进行比较：

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans<b class="caret"></b></a>

查看可以正常使用的版本。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Bootstrap dropdown</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />

</head>
<body>
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <ul class="nav">
                    <a class="brand" href="#">w3resource</a>
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li class="dropdown" id="accountmenu">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">PHP</a></li>
                            <li><a href="#">MySQL</a></li>
                            <li class="divider"></li>
                            <li><a href="#">JavaScript</a></li>
                            <li><a href="#">HTML5</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container-fluid">
     <h1>Dropdown Example</h1>
    </div>
    <script type="text/javascript" src="js/jquery-latest.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.dropdown-toggle').dropdown();
        });
   </script>
</body>
</html>
— 富兰克林
source
4

引导程序和jquery必须同时包括：

<link type="text/css" href="/{ProjectName}/css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/{ProjectName}/js/jquery-x.x.x.custom.min.js"></script>

<link type="text/css" href="/{ProjectName}/css/bootstrap.css" rel="stylesheet" />
<script type="text/javascript" src="/{ProjectName}/js/bootstrap.js"></script>

注意：jquery-xxxmin.js版本必须为2.xx版本！

— 廖伟
source
4

我想通了，并为此IST最简单的方法只是复制和过去的引导链接的CDN可以在发现https://www.bootstrapcdn.com/并可以在这里找到Jquery的CDN脚本https：//开头code.jquery.com/，然后复制链接，然后将引导链接粘贴到HTML的头部，将Jquery脚本粘贴到HTML的主体，如下例所示：

    <!DOCTYPE html>
    <html>
      <head>

        <title>Purrfect Match Landing Page</title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <!--<link rel="stylesheet" href="griddemo.css">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

      </head>

      <body>

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">      </script>    
      </body>
    </html>

对我来说，这是一个完美的希望，对您也是如此：)

— 阿德赫·库特希
source
谢谢 ！，在</body>标签使之起作用之前将其移动！
— 瑞安·阿基诺
2

在头部尝试

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
— 哈姆扎·贾维德（Hamza Javed）
source
2

我在这里做的是.....

刚刚从我的项目中删除了bootstrap.min.js，并向其中添加了bootstrap.js，它开始起作用.....

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js"
                  //"~/Scripts/bootstrap.min.js"));
— 莫希特·达万（Mohit Dhawan）
source
添加到#kubilay答案：每个文档可以有一个名为'A'的类。.min.css / .min.js-通常是相同的css和js文件，其中删除了所有空格。它使它们更小且加载更快。浏览器仍然不需要空格。
— Mohit Dhawan
如果您同时使用了两者，则删除其中之一
— Mohit Dhawan
2

试试这个代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bootstrap Tutorial</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <h1>Welcome to Bootstrap</h1>
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown button
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>


    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
— Nishant Ingle
source
1

您必须检查冲突的css文件/属性，例如，您可能在其他地方具有“ .nav”自定义样式内容，请尝试禁用自己的css文件并检查是否有效，然后检查导致冲突的文件或自定义样式，还要确保您将在代码中包含bootstrap.min.js

— 曼西
source
1

我有一个类似的问题，只是观察到我两次添加了引导脚本，而第二个引导脚本是在上面之后的jQuery脚本。

解：

  • 确保bootstrap.min.js和jquery.min.js仅在文件中包含一次。
  • bootstrap.min.js脚本应包含在jquery.min.js之后
— BK
source
1

将jQuery<script>和样式表下面的内容粘贴粘贴<link>到您的<head>，以确保您正在加载所有必要的文件。

请注意，您的JQuery.js文件位于.css样式表上方

只需粘贴以下行进行测试

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

该问题主要发生在加载jQuery脚本时，请确保正确添加引用。

现在测试

仍然无法解决问题，请查看引导网站上的示例实现。

https://getbootstrap.com/docs/4.3/components/navbar/#supported-content

— 阿米尔·多拉（Amir Dora）。
source
1

对于最新的Bootstrap，您将需要Popper.js

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

将链接复制到“<body>标签的内部”<Head>标签的“正文结尾”部分中。

— 穆罕默德·伊德雷斯说
source
0

我遇到了同样的问题，也把我带到了这里。

我的问题：我正在使用推荐的jquery 1.12.0版本作为我的jquery脚本文件。

解决方案：将jquery脚本替换为jquery 2.2.0版本。

那为我解决了。

— 珠穆朗玛峰
source
0

对我来说，这是一个CORS问题。我crossorigin="anonymous"从脚本导入标签中删除了它，然后又开始工作了。

顺便说一句，总是可以以正确的顺序找到最新的脚本标签：https：//getbootstrap.com/

编辑：显然，添加defer到script标签还将破坏所有的Bootstrap好东西。

— 卡梅隆·哈德森（Cameron Hudson）
source
0

从引导站点的此处复制/粘贴CSS链接，然后复制JS链接。然后，下拉列表应该起作用。

我的页面看起来像：

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <title>Website Title</title>
  </head>
  <body>
    <div id="content" />
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
  </body>
</html>

（从这里导航栏）

— Pro Q
source
-1

我已经使用Angular 7，jQuery 3.4.1，Popper 1.12.9和Bootstrap 4.3.1进行了设置，但对我来说没有任何帮助，我做了一些样式方面的小技巧：

.dropdown.show .dropdown-menu {
    opacity: 1 !important;
}

HTML看起来像这样：

<nav class="navbar navbar-expand-lg navbar-dark fixed-top py-1">
 <div class="container-fluid">
    <ul class="navbar-nav">
        <li class="nav-item dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" id="dropdown-id"
                aria-expanded="false">Menu</button>
            <div class="dropdown-menu" aria-labelledby="dropdown-id">
                <a class="dropdown-item" [routerLink]='["/"]'>Main page</a>
                <a class="dropdown-item" [routerLink]='["/about"]'>About</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" [routerLink]='["/about/terms"]'>Terms</a>
                <a class="dropdown-item" [routerLink]='["/about/privacy"]'>Privacy</a>
            </div>
        </li>
     </ul>
  </div>
</nav>
— 0卢卡斯0
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.