102

我无法让引导下拉菜单工作。这是我的导航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>

我究竟做错了什么?感谢您的回答!

4

26 回答 26

176

我有同样的问题。经过几个小时的故障排除发现,

我有

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

希望这可以帮助某人

于 2014-06-01T22:08:03.140 回答
98

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

于 2014-07-10T10:27:53.213 回答
25

仅供参考:如果您有 bootstrap.js,则不应添加bootstrap-dropdown.js。

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

于 2013-01-22T01:37:49.940 回答
15

工作演示: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>
于 2012-09-17T12:06:53.277 回答
14

对于您的样式,您需要包含引导程序的 css 文件,通常在</head>元素之前

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

接下来您需要包含 js 文件,建议将它们包含在文档的末尾,通常在</body>so 页面加载更快之前。

<script src="js/jquery.js"></script>        
<script src="js/bootstrap.js"></script>
于 2013-03-15T19:36:37.097 回答
10

我刚刚在我的索引页面中 添加了JS一部分,然后它工作了粘贴这个,如果你使用的是最新版本的引导程序 (01.12.2020)bootstrap


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
于 2020-12-01T18:37:48.240 回答
8

在正文标签中添加以下行。

<!-- 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>
于 2014-08-05T20:00:34.090 回答
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>
于 2014-06-27T03:22:35.467 回答
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>
于 2012-09-17T12:05:29.593 回答
4

bootstrap 和 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 版本!!!

于 2016-07-19T18:42:04.973 回答
4

我想通了,最简单的方法就是复制并通过可以在https://www.bootstrapcdn.com/中找到的引导链接的 CDN和可以在此处找到的 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>

对我来说完美,希望它也适合你:)

于 2016-11-15T20:54:35.753 回答
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">
于 2016-02-17T22:06:17.193 回答
2

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

刚刚从我的项目中删除了 bootstrap.min.js 并将 bootstrap.js 添加到它,它开始工作......

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js"
                  //"~/Scripts/bootstrap.min.js"));
于 2016-06-08T12:34:37.677 回答
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>
于 2019-08-20T06:26:48.027 回答
2

将 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

于 2020-05-27T20:45:57.543 回答
1

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

于 2016-04-18T22:18:53.320 回答
1

我有一个类似的问题只是观察到我已经添加了两次引导脚本,第二个引导脚本在 jquery 脚本之上。

解决方案:

  • 确保 bootstrap.min.js 和 jquery.min.js 在您的文件中只包含一次。
  • bootstrap.min.js 脚本应该包含在 jquery.min.js 之后
于 2019-05-03T10:14:40.793 回答
1

检查 popper.js 库,因为我有同样的问题,您可以在https://getbootstrap.com/上找到 bootstrap、jquery 和 popper CDN 的下拉菜单, 或者复制以下脚本标签

于 2020-02-29T21:21:03.003 回答
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>在Tag 内部的 Tag之前复制 Body 的 End of the Body 部分的链接<Head>

于 2020-03-30T15:29:12.237 回答
1

在我的情况下,原来的问题原来是答案。在引导程序文档页面上,没有提到使用脚本来启用下拉菜单,但至少在我的情况下,它似乎是必要的。

一旦我从原始问题中添加了这个脚本,它就会神奇地开始工作。

<script>
 $(document).ready(function(){
    $('.dropdown-toggle').dropdown()
});
</script>

--编辑:根本原因与我的父导航容器的格式有关,我吹走了我的整个导航部分并用引导示例替换它,它开始在没有脚本的情况下工作。因此,这两种解决方案都有效,但对我来说,把它吹走似乎是“正确”的方式,因为脚本感觉像是作弊。

于 2021-05-07T14:22:28.283 回答
0

我遇到了同样的问题,导致我来到这里。

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

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

这为我解决了它。

于 2016-02-06T17:11:50.453 回答
0

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

顺便说一句,最新的脚本标签,按正确的顺序,总是可以在这里找到:https ://getbootstrap.com/

编辑:显然添加deferscript标签也会破坏所有引导程序的好东西。

于 2018-07-17T20:45:20.093 回答
0

复制/粘贴 CSS 链接,后跟来自 bootstrap 站点的 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>

(从这里导航栏)

于 2019-05-02T21:19:20.520 回答
0

当我混合 css 和 bootstrap 版本时,我的(同样的)问题出现了。我正在使用版本 3 bootstrap.min.js 和版本 4.5 bootstrap.min.css

如果您最近在静态文件夹中加载或覆盖了一堆 css 和 js 文件,那么这将是一个不错的起点。

祝你好运。

于 2020-11-23T00:22:58.387 回答
0

我在使用 Angular 12 和 Bootstrap 5 时遇到了这个问题。我的问题是我错误地将 CSS 文件放入了脚本部分:

        "styles": [
          "node_modules/angular-calendar/css/angular-calendar.css",
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "node_modules/bootstrap-icons/font/bootstrap-icons.css",
          "node_modules/sweetalert2/src/sweetalert2.scss",
          "src/styles.css"
        ],
        "scripts": [
          "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
          "node_modules/sweetalert2/src/sweetalert2.scss"  <===== in wrong section
        ]

该应用程序构建正常并且在浏览器控制台中没有显示任何错误,但下拉切换没有任何作用。

于 2021-09-09T14:43:18.087 回答
-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>
于 2019-09-15T19:47:50.157 回答