如果所有孩子都是“显示：无”，我该如何隐藏父 div答案

【问题标题】：how can I hide parent div if all the children are "display:none"如果所有孩子都是“显示：无”，我该如何隐藏父 div
【发布时间】：2023-03-10 12:09:01
【问题描述】：

我有这个 HTML 块

 <div class="abc">
       <div class="xyz" style="display: none;">xyz</div>
       <div class="xyz" style="display: none;">xyz</div>
       <div class="xyz" style="display: none;">xyz</div>
    </div>
    <div class="abc">
       <div class="xyz" style="display: none;">xyz</div>
       <div class="xyz" style="display: none;">xyz</div>
       <div class="xyz" style="display: block;">xyz</div>
       <div class="xyz" style="display: block;">xyz</div>
     </div>

如果父 div 包含所有“display:none” div，我想隐藏它，否则我想显示父 div..

【问题讨论】：

见：How much research effort is expected
$(".abc").not($(".abc > div:visible").parent()).hide();
定义一个truthy变量并检查它的值以用于父母孩子的循环。现在写吧……

标签： javascript html jquery css

【解决方案1】：

此代码使用纯 JavaScript。首先，您将获得 abc 类的所有元素的列表，并为其子级创建列表。然后你迭代它们并检查除none 之外的任何display 值。如果父母的孩子都在none时都经历过，那么您最后将父母设置为display: none，否则您只需打破循环。

let abc = document.getElementsByClassName("abc");
let breaker;

for(i = 0; i < abc.length; i++) {
    let children = abc[i].children;
  for(x = 0; x < children.length; x++) {
    let child = children[x];
    if(child.style.display != "none") {
        breaker = true;
    } else { breaker = false }
  }
  if(breaker == true) {continue}
  abc[i].style.display = "none"; // Comment out to see effect
}

我在小提琴中添加了简单的 CSS 来展示它。只需注释掉最后一行abc[i].style.display = "none";即可确认效果。

https://jsfiddle.net/h40f8L6o/42/

【讨论】：

【解决方案2】：

使用 Jquery 尝试这样的操作。

$(".abc").map(function(){
    let flag = true;
    $(this).find(".xyz").map(function(){
       if($(this).css("display") != "none"){
          flag = false;
       }
    });

    if(flag){
       $(this).css("display", "none");
    }else {
       $(this).css("display", "block");
    }
})

【讨论】：

【解决方案3】：

检查孩子是否都显示无：

let parentDiv = // get parent div
let childDivs = parentDiv.childNodes;
let hideParent = true;
for(let i = 0; i < childDivs.length; i++){
    if(childDivs[i].style.display != "none"){
        hideParent = false;
        break;
    }
}

如果是，隐藏父级：

if(hideParent){
    parentDiv.style.display = "none";
}

【讨论】：

【解决方案4】：

我没有看到任何直接的 CSS 属性可以在这里解决问题。你可以使用ES来实现这个，

    const parentDiv = document.getElementsByClassName("abc");
    Array.prototype.forEach.call(parentDiv, function (pDiv, i) {
        let isAllDisplayNone = true;
        Array.prototype.forEach.call(pDiv.children, function (cDiv, j) {
            if(cDiv.style.display === "block") {
                isAllDisplayNone = false;
            }
        });
        if(isAllDisplayNone === true)
            pDiv.style.display = "none";
        
    });

迭代所有父项和子项以识别是否所有子项都显示为无。如果是这样，隐藏父元素。

【讨论】：