如果所有li子元素都具有CSS样式显示，则隐藏父元素:none

Hide parent if all li children element have CSS style display: none

本文关键字：元素 隐藏 none 显示 CSS li 如果 样式      更新时间：2023-09-26

我不能这么做，因为页面上有很多li块。。。

简化的HTML:

    <li class="first"> <a href="http://myweb.com/test/something" title="">AUDIO</a>
  <ul style="display: none;">
    <li class="  toto"> <a href="http://myweb.com/test/something" title="">Audio one</a>
      <ul style="display: none;">
        <li class="  toto"> <a href="http://myweb.com/test/something" title="">Accessories (<font color="#0b8553"><b>0</b></font>)</a></li>
        <li class="  toto" style="display:none"> <a href="http://myweb.com/test/something" title="">Audio mp3 (<font color="#0b8553"><b>0</b></font>)</a></li>
        <li class="  toto" style="display:none"> <a href="http://myweb.com/test/something" title="">Audio player (<font color="#0b8553"><b>1</b></font>)</a></li>
      </ul>
    </li>
    <li class="last  toto" style="display:none"> <a href="http://myweb.com/test/something" title="">Audio hifi</a>
      <ul style="display: none;">
        <li class="last  toto" style="display:none"> <a href="http://myweb.com/test/something" title="">Audio items (<font color="#0b8553"><b>0</b></font>)</a></li>
      </ul>
    </li>
  </ul>
</li>
<li class="first"> <a href="http://myweb.com/test/something" title="">OTHER</a>
  <ul style="display: none;">
    <li class="  toto" style="display:none"> <a href="http://myweb.com/test/something" title="">other 2</a>
      <ul style="display: none;">
        <li class="  toto" style="display:none"> <a href="http://myweb.com/test/something" title="">other 3 (<font color="#0b8553"><b>0</b></font>)</a></li>
        <li class="  toto" style="display:none"> <a href="http://myweb.com/test/something" title="">other 4 (<font color="#0b8553"><b>0</b></font>)</a></li>
        <li class="  toto" style="display:none"> <a href="http://myweb.com/test/something" title="">other 5 (<font color="#0b8553"><b>1</b></font>)</a></li>
      </ul>
    </li>
    <li class="last  toto" style="display:none"> <a href="http://myweb.com/test/something" title="">other 6</a>
      <ul style="display: none;">
        <li class="last  toto" style="display:none"> <a href="http://myweb.com/test/something" title="">other 7 (<font color="#0b8553"><b>0</b></font>)</a></li>
      </ul>
    </li>
  </ul>
</li>

正如您所看到的，第一个块有一些<li class=" toto">而没有css display none，而第二个块（OTHER）有所有li且style="display:none"

因此，我需要隐藏特定的.首先仅使用jQuery。。。再说一遍，页面上有很多类似的块。

例如。

if(!$(".first").children().is(':visible')) {
  $(".first").hide();
}

这不起作用，因为它选择了所有的。首先在页面上，我需要检查每个。首先单独隐藏或保留它…

这种情况下的最终结果必须是：

音频（不带"OTHER"）

通常，您只需根据li子代元素的总数是否等于用li:hidden选择的数量来筛选li.first元素。

$('li.first').filter(function() {
  return $(this).find('li').length === $(this).find('li:hidden').length;
}).hide();

但是，这在您的情况下显然不起作用，因为从技术上讲，所有的子代li元素都隐藏在HTML中，因为它们的父级ul元素也被隐藏。

如果要根据每个li元素的display属性进行检查，则可以使用：

更新示例

$('li.first').filter(function () {
  return $(this).find('li').length === $(this).find('li').filter(function () {
    return $(this).css('display') === 'none';
  }).length;
}).hide();
相关文章：