Bootstrap 5.2模态框打开时添加背景类失效问题排查

问题核心 #

你想用Bootstrap 5.2的下拉菜单当作模态框切换元素，当dropdown-menu（id为modalToggle）添加show类时，给background-opacity元素加上background-focus类，但现有JS代码未生效。

现有代码的问题 #

第一种写法的错误

• 调用classList.contains()和classList.add/remove()时，类名多了.，这两个方法只需要传纯类名字符串，不需要带CSS选择器的点。
• 仅在页面加载时执行了一次toggleClass()，没有监听下拉菜单的状态变化——Bootstrap的下拉菜单切换由自身JS触发，你需要在状态变化时重新执行判断，而非只运行一次。

第二种写法的错误

• 同样仅在页面加载时执行了一次三元判断，下拉菜单切换时不会再次触发，无法动态更新背景类。

正确解决方案 #

Bootstrap 5的下拉组件提供了专属事件，直接监听这些事件来切换类是最可靠的方式：

const backgroundChange = document.getElementById('background-opacity');
// 找到下拉组件的容器（包含dropdown-toggle和dropdown-menu的父元素）
const dropdownContainer = document.querySelector('.nav-item.dropdown');

// 下拉菜单即将显示时，添加背景类
dropdownContainer.addEventListener('show.bs.dropdown', () => {
  backgroundChange.classList.add('background-focus');
});

// 下拉菜单即将隐藏时，移除背景类
dropdownContainer.addEventListener('hide.bs.dropdown', () => {
  backgroundChange.classList.remove('background-focus');
});

补充：手动判断的修正（不推荐） #

如果你一定要用手动判断类的方式，需先修正类名的.问题，并且确保在下拉状态变化时调用判断函数，但这种方式不如监听官方事件稳定：

const backgroundChange = document.getElementById('background-opacity');
const modalToggle = document.getElementById('modalToggle');

function toggleClass() {
  if (modalToggle.classList.contains('show')) { // 去掉类名前的.
    backgroundChange.classList.add('background-focus'); // 去掉类名前的.
  } else {
    backgroundChange.classList.remove('background-focus'); // 去掉类名前的.
  }
}

// 监听下拉触发按钮的点击事件（仅作示例，需额外处理外部点击关闭的场景）
document.querySelector('.nav-link.dropdown-toggle').addEventListener('click', toggleClass);

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