如果隐藏所有子Div，如何隐藏父DIV（显示：无）

Question

我有这个HTML块

<div class="abc">
<div class="xyz" style="display: none;">{.......}</div>
<div class="xyz" style="display: none;">{.......}</div>
<div class="xyz" style="display: none;">{.......}</div>
<div class="xyz" style="display: none;">{.......}</div>
<div class="xyz" style="display: none;">{.......}</div>
</div>

因此，如果隐藏了所有子div，那么我想在某些JS动作上隐藏父div（.ABC）。

谢谢

Answer 1

遍历所有子dom元素以检查显示样式并更新状态

$(function(){
  var hid = true;

$('button').click(function(){
$('.xyz').each(function(index,item){
    console.log($(item).css("display"));
      if($(item).css("display") != "none") {
        hid = false;
      }
  }).promise().done(function(){
    if(hid == true) {
      console.log("true");
      $('.abc').hide();
    }
  });
})  
  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="abc">
<div class="xyz" style="display: none;">{.......}</div>
<div class="xyz" style="display: none;">{.......}</div>
<div class="xyz" style="display: none;">{.......}</div>
<div class="xyz" style="display: none;">{.......}</div>
<div class="xyz" style="display: none;">{.......}</div>
</div>
<button type="button">Click</button>

Answer 2

使用:visible伪类选择器并根据可见div的计数显示。您可以使用toggle()方法根据布尔值切换可见性。

$('.abc').toggle($('.xyz:visible').length != 0);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="abc">
  <div class="xyz" style="display: none;">{.......}</div>
  <div class="xyz" style="display: none;">{.......}</div>
  <div class="xyz" style="display: none;">{.......}</div>
  <div class="xyz" style="display: none;">{.......}</div>
  <div class="xyz" style="display: none;">{.......}</div>
</div>

如果有多个元素使用each()方法并迭代它们。

$('.abc').each(function() {
  return $(this).toggle($('.xyz:visible', this).length != 0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="abc">
  <div class="xyz" style="display: none;">{.......}</div>
  <div class="xyz" style="display: none;">{.......}</div>
  <div class="xyz" style="display: none;">{.......}</div>
  <div class="xyz" style="display: none;">{.......}</div>
  <div class="xyz" style="display: none;">{.......}</div>
</div>
<div class="abc">
  <div class="xyz">{.......}</div>
  <div class="xyz" style="display: none;">{.......}</div>
  <div class="xyz" style="display: none;">{.......}</div>
  <div class="xyz" style="display: none;">{.......}</div>
  <div class="xyz" style="display: none;">{.......}</div>
</div>
<div class="abc">
  <div class="xyz" style="display: none;">{.......}</div>
  <div class="xyz" style="display: none;">{.......}</div>
  <div class="xyz" style="display: none;">{.......}</div>
  <div class="xyz" style="display: none;">{.......}</div>
  <div class="xyz" style="display: none;">{.......}</div>
</div>

Answer 3

var allHidden = true;

$('.xyz').each(function(){
 if($(this).is(':visible'))
 {
  allHidden = false;
  return false; //break out of each looping function as soon as first visible div is found
 }
});

if(allHidden)
 $('.abc').css('display','none');
else
 $('.abc').css('display','block');

这是JSFiddle

Answer 4

一种方法，我们在这里使用click事件，因为您没有提供关于您如何隐藏子元素的信息，如下所示：

function toggleOnHiddenChildren() {

  // here we set the the CSS 'display' property
  // via the HTMLElement.style interface,
  // using a conditional ('ternary') operator:
  this.style.display = 

    // here we use Array.prototype.slice(), along
    // with Function.prototype.call(), to convert
    // the NodeList of the 'this.children' into an
    // Array, and then use Array.prototype.every()
    // to iterate over that Array in order to test
    // whether all elements match the supplied
    // test:
    Array.prototype.slice.call(this.children).every(function(child) {

    // we're using window.getComputedStyle() in order
    // to obtain the CSS display property-value regardless
    // of whether the style was set as an inline style
    // (as it would be if directly applied by JavaScript)
    // or via a stylesheet (as it would be if the style was
    // applied via the use of a class-name).
    // if the display property-value is 'none' (the element
    // is hidden) then this returns Boolean true, if all elements
    // return true then the Array.prototype.every() method
    // also returns true, which then causes the display of
    // the 'this' element to be set to 'none', otherwise to
    // 'block':
    return window.getComputedStyle(child, null).display === 'none';
  }) ? 'none' : 'block';
}

// creating an Array of the <div> elements with the class-
// name of 'abc':
var abcElements = Array.prototype.slice.call(
    document.querySelectorAll('div.abc')
);

// iterating over the Array of elements using
// Array.prototype.forEach():
abcElements.forEach(function(abc){
  // 'abc' : a reference to the current element of the
  //         Array of elements over which we're iterating.

  // here we add an event-listener for the 'click' event
  // which calls the named function as the event-handler
  // (note the deliberate lack of parentheses):
  abc.addEventListener('click', toggleOnHiddenChildren);
});

＆＃13;

＆＃13;

function toggleOnHiddenChildren() {
  this.style.display = Array.prototype.slice.call(this.children).every(function(child) {
    return window.getComputedStyle(child, null).display === 'none';
  }) ? 'none' : 'block';
}

var abcElements = Array.prototype.slice.call(document.querySelectorAll('div.abc'));

abcElements.forEach(function(abc) {
  abc.addEventListener('click', toggleOnHiddenChildren);
});

＆＃13;

.abc {
  border: 2px solid #000;
  height: 2em;
  background-color: #f90;
}

＆＃13;

<div class="abc">
  <div class="xyz" style="display: none;">{.......}</div>
  <div class="xyz" style="display: none;">{.......}</div>
  <div class="xyz" style="display: none;">{.......}</div>
  <div class="xyz" style="display: none;">{.......}</div>
  <div class="xyz" style="display: none;">{.......}</div>
</div>

＆＃13;

＆＃13;

＆＃13;

请注意，在兼容（ES2015）浏览器中，使用：

Array.prototype.slice.call(NodeList);

可以替换为：

Array.from(NodeList);

当然，如果您希望此功能在页面加载时运行，同时仍然响应与之前相同的事件，我们可以将对Array.prototype.forEach()的调用修改为以下内容，直接触发event;虽然这确实需要我们使用Event构造函数创建一个新事件：

var clickEvent = new Event('click'); 

abcElements.forEach(function(abc) {
  abc.addEventListener('click', toggleOnHiddenChildren);
  abc.dispatchEvent(clickEvent);
});

＆＃13;

＆＃13;

function toggleOnHiddenChildren() {
  this.style.display = Array.prototype.slice.call(this.children).every(function(child) {
    return window.getComputedStyle(child, null).display === 'none';
  }) ? 'none' : 'block';
}

var abcElements = Array.prototype.slice.call(document.querySelectorAll('div.abc')),
  clickEvent = new Event('click');

abcElements.forEach(function(abc) {
  abc.addEventListener('click', toggleOnHiddenChildren);
  abc.dispatchEvent(clickEvent);
});

＆＃13;

.abc {
  border: 2px solid #000;
  height: 2em;
  background-color: #f90;
}

＆＃13;

<div class="abc">
  <div class="xyz" style="display: none;">{.......}</div>
  <div class="xyz" style="display: none;">{.......}</div>
  <div class="xyz" style="display: none;">{.......}</div>
  <div class="xyz" style="display: none;">{.......}</div>
  <div class="xyz" style="display: none;">{.......}</div>
</div>

＆＃13;

＆＃13;

＆＃13;

或者我们可以简单地使用立即调用的函数表达式（＆＃34; IIFE＆＃34;），浏览器在遇到函数时立即执行该函数：

// the 'elements' argument is passed in from the 'external'
// function-following parentheses:

(function (elements) {

  // iterating over the Array of elements passed to
  // the anonymous function using Array.prototype.forEach():
  elements.forEach(function(abc){
    // 'abc' : reference to the current element of the
    // Array of elements over which we're iterating.

    // setting the 'display' property-value as before,
    // again using Array.prototype.every() to check that
    // all child elements are 'display: none'
    abc.style.display = Array.prototype.slice.call(abc.children).every(function(child){
      return window.getComputedStyle(child, null).display === 'none';
    }) ? 'none' : 'block';
  });

})(Array.prototype.slice.call(document.querySelectorAll('div.abc')));

＆＃13;

＆＃13;

(function(elements) {

  elements.forEach(function(abc) {
    abc.style.display = Array.prototype.slice.call(abc.children).every(function(child) {
      return window.getComputedStyle(child, null).display === 'none';
    }) ? 'none' : 'block';
  });

})(Array.prototype.slice.call(document.querySelectorAll('div.abc')));

＆＃13;

.abc {
  border: 2px solid #000;
  height: 2em;
  background-color: #f90;
}

＆＃13;

<div class="abc">
  <div class="xyz" style="display: none;">{.......}</div>
  <div class="xyz" style="display: none;">{.......}</div>
  <div class="xyz" style="display: none;">{.......}</div>
  <div class="xyz" style="display: none;">{.......}</div>
  <div class="xyz" style="display: none;">{.......}</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

试试这个：

$(document).ready(function(){
  var children = $(".abc").find($('.xyz'));
  if($(children).is(":hidden")){
    $(".abc").hide();
  }
  else{
    $(".abc").show();
  }

});

Answer 6

$('.abc').css('display', 'none') // .abc if set to display none

$('.abc .xyz').each(function(i,e){  //looping inner divs
 if($(this).css('display') === 'block'){ //checks if any inner div is block then parent div set to block otherwise it remains display none
  $('.abc').css('display', 'block')
}
});

Answer 7

试试这个：

xyz

工作演示：

https://jsfiddle.net/qrd64nxh/

Answer 8

如果具有if ($('.xyz').css('display') == 'none'){ $('.abc').hide(); }类的所有元素都具有display：none的样式属性，则可以使用JavaScript进行检查，然后隐藏父元素，否则不执行任何操作。

＆＃13;

＆＃13;

.abc{
  width: 100px;
  height 100px;
  background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="abc">
ABC DIV
<div class="xyz" style="display: none;">{.......}</div>
<div class="xyz" style="display: none;">{.......}</div>
<div class="xyz" style="display: none;">{.......}</div>
<div class="xyz" style="display: none;">{.......}</div>
<div class="xyz" style="display: none;">{.......}</div>
</div>

＆＃13;

abc

＆＃13;

＆＃13;

＆＃13;

这样做的好处是，您可以为可见性：隐藏属性的.hide（）创建一些简单的额外if语句。

您可以将其中一个元素从display：none更改为不同的元素，{{1}}父元素将显示。

Fiddle here