隐藏 div 标签，如果下一个 ul 的 li 都显示 none

Question

我有一些带有div和下一个同级ul的HTML，如下所示：

<div id="someid" class="someclass">
<div class="title"></div>
<ul>
<li style="display: none;">1</li>
<li style="display: none;">2</li>
<li style="display: none;">3</li>
<li>4</li>
</ul>
<div class="title"></div>
<ul>
<li style="display: none;">1</li>
<li style="display: none;">2</li>
<li style="display: none;">3</li>
<li style="display: none;">4</li>
</ul>
<div class="title"></div>
<ul>
<li style="display: none;">1</li>
<li>2</li>
<li style="display: none;">3</li>
<li style="display: none;">4</li>
</ul>
</div>

如果下一个ul的li都是display: none，如何使类为title的div成为display: none？

Answer 1

不幸的是，今天的CSS无法做到这一点(请参阅下面的明天的CSS(，但使用JavaScript，您可以循环遍历.title元素，看看它们的下一个元素是否是ul，它的所有子元素是否都是display: none，如果是，则将title元素设置为display: none：

for (const element of document.querySelectorAll(".title")) {
if (element.nextElementSibling.tagName === "UL" &&
[...element.nextElementSibling.children].every(
(child) => getComputedStyle(child).display === "none"
)) {
element.style.display = "none";
}
}

<div id="someid" class="someclass">
<div class="title">Should Show</div>
<ul>
<li style="display: none;">1</li>
<li style="display: none;">2</li>
<li style="display: none;">3</li>
<li>4</li>
</ul>
<div class="title">Should Hide</div>
<ul>
<li style="display: none;">1</li>
<li style="display: none;">2</li>
<li style="display: none;">3</li>
<li style="display: none;">4</li>
</ul>
<div class="title">Should Show</div>
<ul>
<li style="display: none;">1</li>
<li>2</li>
<li style="display: none;">3</li>
<li style="display: none;">4</li>
</ul>
</div>

您可以考虑至少everycalback(可能还有整个检查(：

const isDisplayNone = (element) => getComputedStyle(element).display === "none";
for (const element of document.querySelectorAll(".title")) {
if (element.nextElementSibling.tagName === "UL" &&
[...element.nextElementSibling.children].every(isDisplayNone)
) {
element.style.display = "none";
}
}

<div id="someid" class="someclass">
<div class="title">Should Show</div>
<ul>
<li style="display: none;">1</li>
<li style="display: none;">2</li>
<li style="display: none;">3</li>
<li>4</li>
</ul>
<div class="title">Should Hide</div>
<ul>
<li style="display: none;">1</li>
<li style="display: none;">2</li>
<li style="display: none;">3</li>
<li style="display: none;">4</li>
</ul>
<div class="title">Should Show</div>
<ul>
<li style="display: none;">1</li>
<li>2</li>
<li style="display: none;">3</li>
<li style="display: none;">4</li>
</ul>
</div>

---

使用明天的CSS，如果我们稍微更改结构以添加包装div，并且我们用类而不是内联样式隐藏li元素(这几乎总是最好的(，我们就可以做到：

.hidden {
display: none;
}
.container .title {
display: none;
}
.container:has(li:not(.hidden)) .title {
display: block;
}

<p><strong>Only works on cutting-edge browsers!!</strong></p>
<div id="someid" class="someclass">
<div class="container">
<div class="title">Should Show</div>
<ul>
<li class="hidden">1</li>
<li class="hidden">2</li>
<li class="hidden">3</li>
<li>4</li>
</ul>
</div>
<div class="container">
<div class="title">Should Hide</div>
<ul>
<li class="hidden">1</li>
<li class="hidden">2</li>
<li class="hidden">3</li>
<li class="hidden">4</li>
</ul>
</div>
<div class="container">
<div class="title">Should Show</div>
<ul>
<li class="hidden">1</li>
<li>2</li>
<li class="hidden">3</li>
<li class="hidden">4</li>
</ul>
</div>
</div>

这只适用于尖端浏览器，如Chrome v105及更高版本(甚至Chrome v104都没有(。更多关于:has的信息，请点击MDN和规范

Answer 2

T.J.Crowders"明天"；使用:has的CSS不需要更改布局——只需要用类替换内联样式(如他的回答所示(——但这就是更改所需要的全部内容

注意：这在Chrome和Edge中有效(不确定Safari(-在Firefox中，即使启用了:has配置标志，这也不起作用-Firefox不喜欢:has中的同级选择器(即+(

.hidden {
display: none;
}
.title:not(:has(+ul>:not(li.hidden))) {
display: none;
}

<div id="someid" class="someclass">
<div class="title">Should Show</div>
<ul>
<li class="hidden">1</li>
<li class="hidden">2</li>
<li class="hidden">3</li>
<li>4</li>
</ul>
<div class="title">Should Hide</div>
<ul>
<li class="hidden">1</li>
<li class="hidden">2</li>
<li class="hidden">3</li>
<li class="hidden">4</li>
</ul>
<div class="title">Should Show</div>
<ul>
<li class="hidden">1</li>
<li>2</li>
<li class="hidden">3</li>
<li class="hidden">4</li>
</ul>
</div>