jQuery问题：页面元素含is-open类时为指定div添加open类失效

你的代码问题在于只在页面加载时执行一次判断，而is-open类是后续打开模态框/标签页时动态添加的，所以代码不会自动重新触发判断逻辑。以下是两种可行的解决方案：

方案1：用MutationObserver监听DOM类变化（通用方案） #

这种方法可以监听页面中所有元素的类名变化，一旦有元素添加或移除is-open类，就自动更新目标元素的类：

// 目标元素
const blurScreen = $(".blur-screen")[0];
// 配置监听选项：监听子元素class属性变化
const observerConfig = {
  attributes: true,
  attributeFilter: ['class'],
  subtree: true
};

// 定义监听回调
const observerCallback = function(mutationsList) {
  // 检查页面是否存在带is-open类的元素
  const hasOpenClass = $(".is-open").length > 0;
  // 更新blur-screen的类
  $(blurScreen).toggleClass("open", hasOpenClass);
};

// 创建并启动观察者
const observer = new MutationObserver(observerCallback);
observer.observe(document.body, observerConfig);

方案2：绑定模态框/标签页的原生事件（更高效） #

如果你的模态框或标签页是用特定框架（比如Bootstrap、jQuery UI）实现的，直接绑定它们的显示/隐藏事件会比监听整个DOM更高效：

以Bootstrap模态框为例： #

// 模态框显示时添加open类
$('.modal').on('show.bs.modal', function() {
  $(".blur-screen").addClass("open");
});

// 模态框隐藏时移除open类（需检查是否还有其他活跃元素）
$('.modal').on('hide.bs.modal', function() {
  if (!$(".is-open").not($(this)).length) {
    $(".blur-screen").removeClass("open");
  }
});

以jQuery UI标签页为例： #

// 标签页激活时添加open类
$('.tabs').on('tabsactivate', function() {
  $(".blur-screen").addClass("open");
});

// 标签页切换时移除open类（如果没有其他活跃元素）
$('.tabs').on('tabsbeforeactivate', function(event, ui) {
  if (!$(".is-open").not(ui.oldPanel).length) {
    $(".blur-screen").removeClass("open");
  }
});

关键说明 #

• 方案1是通用兜底方案，不管用什么框架实现模态框/标签页都能生效，但监听整个DOM的性能消耗略高。
• 方案2更精准，性能更好，但需要对应框架的事件支持，适合知道模态框/标签页具体实现的场景。

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