我的全部代码如下,我还没有main.js文件.我只是想让下拉菜单工作,但不管我按什么,下拉菜单都不会掉下来.

以下是我的代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap</title>
  <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
  
</head>
<body>
  <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>
  <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>

谢谢!

推荐答案

您应该使用CDN导入 bootstrap 和data-bs-toggle="dropdown"应出现在打开下拉菜单的按钮中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap</title>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  
</head>
<body>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-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>
 <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script></script>
</body>
</html>

Javascript相关问答推荐

if/else JavaScript中的条件行为

Cookie中未保存会话数据

使用JavaScript重新排序行

如何从一个列表中创建一个2列的表?

更改预请求脚本中重用的JSON主体变量- Postman

以Angular 实现ng-Circle-Progress时出错:模块没有导出的成员

WP Bootstrap NavWaker:下拉菜单一次打开所有下拉菜单

根据一个条件,如何从处理过的数组中移除一项并将其移动到另一个数组?

在css中放置所需 colored颜色 以填充图像的透明区域

将数组扩展到对象中

Jexl to LowerCase()和Replace()

用另一个带有类名的div包装元素

如何让SVG图标在被点击和访问后改变 colored颜色 ,并在被访问后取消点击时恢复到原来的 colored颜色 ?

我的NavLink活动类在REACT-ROUTER-V6中出现问题

rxjs在每次迭代后更新数组的可观察值

如何使用Cypress在IFRAME中打字

JQuery使用选项填充HTMLSELECT并设置默认结果,默认结果显示为空

如何检测当前是否没有按下键盘上的键?

如何调整下拉内容,使其不与其他元素重叠?

类型脚本类型声明未按预期工作