Angular12

Question

我正在尝试这个示例 bootstrap 下拉代码。没有错误，但我的下拉菜单不起作用我已经安装了 jquery-popper、jquery 和 bootstrap 5

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" 
id="dropdownMenuButton1" data-bs-toggle="dropdown" aria- 
expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>

这就是我的 angular.json 的样子

`        "styles": [
          "./node_modules/@angular/material/prebuilt-themes/deeppurple- 
          amber.css",
          "./node_modules/bootstrap/dist/css/bootstrap.css",
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.css",
          "node_modules/slick-carousel/slick/slick.scss",
          "node_modules/slick-carousel/slick/slick-theme.scss"

        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js",
          "node_modules/slick-carousel/slick/slick.min.js"
        ]`

我还在脚本数组中包含了“node_modules/@popperjs/core/dist/umd/popper.min.js”，并尝试过但没有任何反应。我错过了什么吗

Answer 1

您使用的 bootstrap 是什么版本？如果您使用的是 v5，则不应导入 jQuery，因为 Bootstrap 在其最新版本中删除了 jQuery。

Our latest release, Bootstrap 5, focuses on improving v4’s codebase with as few major breaking changes as possible. We improved existing features and components, removed support for older browsers, dropped jQuery for regular JavaScript, and embraced more future-friendly technologies like CSS custom properties as part of our tooling.

（摘自Bootstrap About Page）

对于某些组件（例如弹出框、工具提示），您将需要 Popper.js。确保通过将 Bootstrap 和 Popper.js 都传递到脚本部分来包含它，或者只包含包含 Popper.js 的完整 Bootstrap 包，如下所示：

"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.js",
  // other script files ...
],

您还可以使用捆绑包的缩小版本 ([...].bundle.min.js)

Angular12 - bootstrap 下拉列表中的问题

Angular12 - Issues in bootstrap dropdown

drop-down-menu