При тестировании элемента с селектором :hidden в jQuery следует учитывать, что элемент с абсолютным позиционированием может быть распознан как скрытый, хотя его дочерние элементы видны .
Во-первых, это кажется несколько интуитивно понятным, хотя при внимательном рассмотрении документации по jQuery вы получите соответствующую информацию:
Элементы могут считаться скрытыми по нескольким причинам: [...] их ширина и высота явно установлены на 0. [...]
Так что это действительно имеет смысл в отношении блочной модели и вычисляемого стиля для элемента. Даже если ширина и высота не установлены явно в 0, они могут быть установлены неявно .
Посмотрите на следующий пример:
console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false
.foo {
position: absolute;
left: 10px;
top: 10px;
background: #ff0000;
}
.bar {
position: absolute;
left: 10px;
top: 10px;
width: 20px;
height: 20px;
background: #0000ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
<div class="bar"></div>
</div>
ОБНОВЛЕНИЕ ДЛЯ JQUERY 3.x:
С jQuery 3 описанное поведение изменится! Элементы будут считаться видимыми, если они имеют какие-либо поля макета, в том числе поля нулевой ширины и / или высоты.
JSFiddle с jQuery 3.0.0-alpha1:
http://jsfiddle.net/pM2q3/7/
Тот же JS будет иметь такой вывод:
console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false