如何创建CSS类实现容器内其他DIV均为questionHidden时隐藏labelSection

嘿，这个需求挺实用的！咱们可以用两种方式实现你要的效果：纯CSS（适合现代浏览器）或者JavaScript（兼容所有浏览器），下面分别拆解说明：

一、纯CSS方案（依赖:has()伪类） #

现代浏览器已经支持:has()伪类了，它能让我们基于容器内的子元素状态来设置样式。你只需要给.labelSection添加一个自定义类（比如hidden-when-all-hidden），然后写下面的CSS规则：

/* 定义隐藏类的基础样式 */
.hidden-when-all-hidden {
  display: none;
}

/* 当容器内所有非labelSection的form-group都带有questionHidden类时，触发隐藏 */
.container:not(:has(> .form-group:not(.questionHidden):not(.labelSection))) .labelSection.hidden-when-all-hidden {
  display: none;
}

逻辑说明： #

• :has(> .form-group:not(.questionHidden):not(.labelSection)) 用来检查容器内是否存在不是labelSection且未被隐藏的form-group元素
• 如果不存在这样的元素（也就是其他所有form-group都是questionHidden状态），就给.labelSection.hidden-when-all-hidden设置隐藏样式
• 浏览器支持：Chrome 105+、Firefox 121+、Safari 15.4+，如果项目不需要兼容旧浏览器，这个方案最简洁省心

二、JavaScript方案（兼容所有浏览器） #

如果需要支持不支持:has()的旧浏览器，用JS动态检查状态是更稳妥的选择。步骤如下：

1. 先定义隐藏类的CSS：

.hidden-when-all-hidden {
  display: none;
}

2. 添加JS逻辑来实时检查并切换类：

// 核心检查函数：判断是否需要隐藏labelSection
function toggleLabelSectionVisibility() {
  // 遍历所有目标容器
  document.querySelectorAll('.container').forEach(container => {
    const labelSection = container.querySelector('.labelSection');
    if (!labelSection) return;

    // 获取容器内所有非labelSection的form-group元素
    const otherFormGroups = container.querySelectorAll('.form-group:not(.labelSection)');
    // 判断是否所有元素都带有questionHidden类
    const allAreHidden = Array.from(otherFormGroups).every(el => el.classList.contains('questionHidden'));

    // 根据检查结果切换类
    if (allAreHidden) {
      labelSection.classList.add('hidden-when-all-hidden');
    } else {
      labelSection.classList.remove('hidden-when-all-hidden');
    }
  });
}

// 页面加载完成后先执行一次初始化检查
document.addEventListener('DOMContentLoaded', toggleLabelSectionVisibility);

// 监听元素类属性变化，确保动态修改状态时能实时更新
const classObserver = new MutationObserver(toggleLabelSectionVisibility);
document.querySelectorAll('.container .form-group').forEach(el => {
  classObserver.observe(el, { attributes: true, attributeFilter: ['class'] });
});

逻辑说明： #

• 这个函数会遍历每个容器，检查内部非labelSection的form-group是否全为隐藏状态，动态给.labelSection添加/移除隐藏类
• MutationObserver会自动监听元素的类变化，确保用户操作（比如点击按钮显示/隐藏questionHidden）时能实时触发检查
• 兼容所有主流浏览器，包括旧版Chrome、Firefox、IE11（IE11需要替换Array.from为[].slice.call()来遍历NodeList）

不管用哪种方案，你只需要给目标.labelSection元素加上hidden-when-all-hidden类，就能实现你要的效果啦～

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