如果所有子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);
});

 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); }); 

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

 <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> 

请注意，在兼容（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);
});

 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); }); 

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

 <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> 

或者我们可以简单地使用立即调用的函数表达式（“ IIFE”），这种形式浏览器将在遇到该函数时立即执行该函数：

// 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')));

 (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'))); 

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

 <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 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

尝试这个 ：

$('#btn_hide').click(function(){
var status = 0;
$('.xyz').each(function(){
 if($(this).is(":visible")){
   alert('Do not hide abc');
   status = 0;
 } else 
 {
  status = 1;
 }
})
if(status == 1){
$('.abc').hide();
} else
{
$('.abc').show();
}
})

<div class="abc">asdas
<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>

<input type="button" id="btn_hide" value="Hide">

工作演示：

https://jsfiddle.net/qrd64nxh/

Answer 8

您可以使用JavaScript进行检查，如果xyz类的所有元素都具有display样式属性：none，则隐藏父元素，否则不做任何事情。

 if ($('.xyz').css('display') == 'none'){ $('.abc').hide(); } 

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

 <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> 

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

您可以从显示更改元素之一：无更改为其他内容，并且abc父项将显示。

在这里摆弄