当相邻ul的所有li设为display:none时，如何隐藏对应的div.title？

由于CSS目前无法实现根据相邻元素的子元素状态来控制当前元素的显示，我们需要通过JavaScript来完成这个逻辑。以下是两种实现方式：

原生JavaScript实现 #

// 获取所有带.title类的div元素
const titleElements = document.querySelectorAll('.title');

titleElements.forEach(title => {
    // 获取当前title相邻的下一个ul元素
    const nextUl = title.nextElementSibling;
    // 确认下一个元素确实是ul
    if (nextUl && nextUl.tagName === 'UL') {
        const listItems = nextUl.querySelectorAll('li');
        // 检查所有li是否都处于隐藏状态
        const allLiHidden = Array.from(listItems).every(li => {
            // 若li的隐藏是通过类/外部样式表设置，需用getComputedStyle获取实际显示状态
            return window.getComputedStyle(li).display === 'none';
        });
        // 所有li都隐藏时，隐藏当前title
        if (allLiHidden) {
            title.style.display = 'none';
        }
    }
});

jQuery实现（若项目已引入jQuery） #

$('.title').each(function() {
    const $nextUl = $(this).next('ul');
    if ($nextUl.length > 0) {
        const allLiHidden = $nextUl.find('li').toArray().every(li => {
            return $(li).css('display') === 'none';
        });
        if (allLiHidden) {
            $(this).hide();
        }
    }
});

注意事项 #

• 如果li的display:none是通过CSS类（而非内联样式）设置的，必须使用getComputedStyle（原生）或$(li).css('display')（jQuery）来获取元素的实际显示状态，不能直接读取li.style.display。
• 可以将这段代码放在页面加载完成的事件中（比如DOMContentLoaded），确保DOM元素已全部渲染完毕再执行逻辑。

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