Bootstrap5下拉菜单原生JS无法触发，仅浏览器控制台执行有效

问题描述 #

尝试通过页面内按钮触发JS代码打开Bootstrap5下拉菜单，调用元素的click()方法或尝试使用Dropdown类均无效，但在浏览器开发者控制台运行相同代码却能正常生效。极简测试页面如下：

<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  <script>
    function test() {
      document.getElementById("dropdownMenuButton1").click();
    }
  </script>
</head>
<body>
  <!-- Bootstrap官方示例下拉菜单 -->
  <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>
    </ul>
  </div>
  <!-- 触发下拉的按钮 -->
  <button class="btn btn-primary" onclick="test()">Open Dropdown</button>
</body>
</html>

解决方案 #

直接调用Bootstrap Dropdown实例的toggle()方法，而非模拟click事件，这是官方推荐的程序化控制组件的方式，可避免事件上下文差异导致的问题。

修改后的代码 #

<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  <script>
    // 提前初始化Dropdown实例，避免重复创建
    const dropdown = new bootstrap.Dropdown(document.getElementById("dropdownMenuButton1"));
    
    function test() {
      dropdown.toggle();
    }
  </script>
</head>
<body>
  <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>
    </ul>
  </div>
  <button class="btn btn-primary" onclick="test()">Open Dropdown</button>
</body>
</html>

原因说明 #

页面内通过onclick触发的合成click()事件，与控制台执行的事件存在上下文差异。Bootstrap的Dropdown组件内部可能对事件来源做了判断，或者合成事件未正确触发其内部的状态更新逻辑。而直接调用组件实例的API方法，绕过了事件监听的环节，直接操作组件状态，因此能稳定生效。

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