Bootstrap下拉菜单失效：如何编写正确的TypeScript实现代码？

1. 先修复HTML代码的核心问题 #

你当前代码无法工作的主要原因是Bootstrap 5与Bootstrap 4的data属性命名规则不同，同时CDN版本未匹配你安装的^5.3.1版本。

修正后的HTML代码：

<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 匹配5.3.1版本的Bootstrap资源 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="btn-group">
  <button
    type="button"
    class="btn btn-danger dropdown-toggle"
    data-bs-toggle="dropdown" <!-- Bootstrap 5需加bs前缀 -->
    aria-haspopup="true"
    aria-expanded="false"
  >
    Action
  </button>
  <div class="dropdown-menu">
    <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 class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>
</body>
</html>

2. TypeScript代码实现 #

如果需要通过TypeScript手动初始化下拉菜单（比如处理动态生成的元素、自定义交互逻辑），可以参考以下代码：

基础全局初始化 #

// 从Bootstrap模块导入Dropdown类（npm安装的场景）
import { Dropdown } from 'bootstrap';

// 页面加载完成后初始化所有下拉菜单
document.addEventListener('DOMContentLoaded', () => {
  const dropdownTriggers = document.querySelectorAll('[data-bs-toggle="dropdown"]');
  dropdownTriggers.forEach(trigger => new Dropdown(trigger));
});

自定义交互逻辑示例 #

import { Dropdown } from 'bootstrap';

document.addEventListener('DOMContentLoaded', () => {
  const targetDropdownBtn = document.querySelector('.btn-danger.dropdown-toggle') as HTMLElement;
  if (targetDropdownBtn) {
    const dropdownInstance = new Dropdown(targetDropdownBtn);

    // 监听下拉展开事件
    targetDropdownBtn.addEventListener('show.bs.dropdown', () => {
      console.log('下拉菜单即将展开');
    });

    // 监听下拉收起事件
    targetDropdownBtn.addEventListener('hide.bs.dropdown', () => {
      console.log('下拉菜单即将收起');
    });

    // 手动触发展开/收起（按需调用）
    // dropdownInstance.show();
    // dropdownInstance.hide();
  }
});

关键注意事项 #

• Bootstrap 5对所有data属性添加了bs前缀，如data-bs-toggle，这是与Bootstrap 4最核心的区别。
• 确保引入的CDN版本与本地安装的^5.3.1一致，避免版本不兼容问题。
• 若使用npm安装的Bootstrap，无需再引入CDN资源，直接通过模块导入即可。

内容的提问来源于stack exchange，提问作者Future Hacker