jQuery如果所有子项都隐藏，则隐藏父块

Question

The question is how to hide parent block if all childs are hidden, and display it if they are visible again ? Is it possible to "monitor" block status with jQuery?

jsFiddle example - here red block must automatically hide if we hide yellow and green blocks.

Html

<div id="mother">
    <div class="child1"></div>
   <div class="child2"></div>
</div>

CSS

#mother {
    width:200px;
    height:200px;
    background:red;
}

.child1, .child2 {
    width:100px;
    height:100px;
    background: orange;
}

.child2 {
    background:green;
}

JavaScript

$(function() {
    var childs = $("[class^=child]");

    childs.click(function() {
        $(this).hide();
    });
});

Answer 1

Try

$(function () {
    var childs = $("[class^=child]");

    childs.click(function () {
        $(this).hide();
        //check if any child is visible, if not hide the mother element
        if(!childs.filter(':visible').length){
            $('#mother').hide()
        }
    });
});

Demo: Fiddle

Answer 2

You can check the length of visible elements inside #mother div by using :visible selector along with .length , if it's equal to 0 then hide #mother :

$(function () {
    var childs = $("[class^=child]");
    childs.click(function () {
        $(this).hide();
        if ($("#mother").find(":visible").length == 0) 
            $("#mother").hide();
    });
});

Fiddle Demo

Answer 3

Try this in child click event handlers:

   if($('#mother').children(':visible').length == 0) {
      $('#mother').hide();
   }

Working Demo

Answer 4

You can try so:

$(function() {
    var childs = $("[class^=child]");

    childs.click(function() {
        $(this).hide();
        var $parent = $(this).parent();
        var $child = $parent.find('div:visible');

        if(!$child.length){
           $parent.hide();
        }
    });
});