Drupal 10自定义块中Bootstrap 5下拉按钮点击无响应求助

你的问题不是Drupal 10的特性导致的，核心原因是Bootstrap下拉组件的JavaScript没有正确加载或初始化，以下是具体排查和解决步骤：

• 确认Bootstrap JS组件已加载
  Bootstrap 5的下拉功能依赖其官方JavaScript文件，部分Drupal Bootstrap主题可能不会自动加载所有Bootstrap组件。你需要确保主题已经加载了bootstrap/dropdown库：

  • 如果是自定义模块或块，可以在模块的.libraries.yml文件中声明依赖：

    my_custom_block:
      js:
        js/custom-block.js: {}
      dependencies:
        - bootstrap/dropdown
    

  • 或者在主题的info.yml中确认已包含完整的Bootstrap JS库。

• 手动初始化下拉组件
  若页面是动态加载（比如通过AJAX渲染自定义块），Bootstrap的自动初始化可能不会生效，这时候需要手动触发初始化：
  在你的自定义块模板中添加以下JavaScript代码：

  document.addEventListener('DOMContentLoaded', function() {
    // 找到所有下拉按钮并初始化
    const dropdownButtons = document.querySelectorAll('[data-bs-toggle="dropdown"]');
    dropdownButtons.forEach(button => new bootstrap.Dropdown(button));
  });
  

• 检查浏览器控制台报错
  打开浏览器开发者工具的控制台，查看是否有JavaScript错误（比如Bootstrap JS未找到、变量未定义等），这些报错会直接提示问题所在。

• 验证Bootstrap版本匹配
  确认主题使用的是Bootstrap 5版本，你的代码里用的data-bs-toggle是Bootstrap 5的属性，若主题实际是Bootstrap 4，会导致属性不匹配，下拉无法触发。

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