Bootstrap 5.3：点击单个关闭按钮同步关闭多个Alert

我有两个内容相同但样式略有差异的Alert：一个在桌面及以上设备可见，另一个在中等及以下屏幕固定在底部，二者代码仅容器不同，示例代码如下：

<div id="desktop" class="d-none d-lg-block">
  <div class="alert alert-dismissible fade show">
    ...
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  </div>
</div>

<div id="smaller-than-desktop" class="d-lg-none">
  <div class="alert alert-dismissible fade show">
   ...
   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  </div>
</div>

我发现一个奇怪的现象：DOM中后出现的Alert，点击它的关闭按钮时会同时关闭另一个Alert；但点击先出现的Alert的关闭按钮时，另一个仍会显示。请问有没有办法实现点击任意一个关闭按钮，都能同时关闭这两个Alert？

原因分析 #

Bootstrap默认的data-bs-dismiss="alert"仅针对点击元素最近的.alert父元素触发关闭逻辑，本身不会关联其他Alert组件。你遇到的“后出现的Alert能关另一个”是偶然的不稳定行为，大概率由事件冒泡或组件实例冲突导致，不能作为可靠实现方式。

稳定实现方法 #

要实现点击任意按钮同时关闭两个Alert，需要手动绑定统一的点击事件，具体步骤如下：

1. 移除两个关闭按钮上的data-bs-dismiss="alert"属性，避免默认行为干扰
2. 给按钮绑定自定义点击事件，触发时同步处理两个Alert的关闭

原生JavaScript实现（基于Bootstrap组件实例）

修改后的HTML：

<div id="desktop" class="d-none d-lg-block">
  <div class="alert alert-dismissible fade show" id="alert-desktop">
    ...
    <button type="button" class="btn-close" aria-label="Close"></button>
  </div>
</div>

<div id="smaller-than-desktop" class="d-lg-none">
  <div class="alert alert-dismissible fade show" id="alert-mobile">
   ...
   <button type="button" class="btn-close" aria-label="Close"></button>
  </div>
</div>

对应的JS代码：

// 初始化两个Alert组件实例
const alertDesktop = new bootstrap.Alert(document.getElementById('alert-desktop'));
const alertMobile = new bootstrap.Alert(document.getElementById('alert-mobile'));

// 给所有关闭按钮绑定点击事件
document.querySelectorAll('.btn-close').forEach(btn => {
  btn.addEventListener('click', () => {
    alertDesktop.close();
    alertMobile.close();
  });
});

简化写法（无需手动实例化）

如果不想依赖Bootstrap组件实例，也可以直接操作DOM实现关闭：

document.querySelectorAll('.btn-close').forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelectorAll('.alert').forEach(alert => {
      // 添加动画类并隐藏元素
      alert.classList.add('fade');
      setTimeout(() => {
        alert.classList.add('d-none');
        // 可选：触发Bootstrap关闭完成事件
        alert.dispatchEvent(new Event('closed.bs.alert'));
      }, 300); // 对应Bootstrap默认动画时长
    });
  });
});

注意事项 #

• 确保Bootstrap的JS文件已正确引入，否则bootstrap.Alert无法正常使用
• 若使用jQuery，可通过$('.alert').alert('close')快速实现批量关闭

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