Загрузка...
Для проверки видимости элемента на странице у jQuery есть такие конструкции
if ($element.is(':visible')) {
// если $element виден
}
if ($element.is(':hidden')) {
// если $element не виден
}
Но данные конструкции не всегда адекватно срабатывают, они якобы проверяют наличие стиля display: none, но мне попадался сайт, где у элемента при просмотре в инспекторе, четко видно display: none но условие $element.is(‘:hidden’) не срабатывало.
Возможно я был не внимательный и там были какие-то приколы со скриптами и стилями, которые динамически изменялись, что и повлияло на не работоспособность условия.
В общем если у вас та же хрень, и по каким то мифическим соображением данные условия видимости элементов не срабатывают, то можно использовать другой вариант.
Проверка видимости элемента с помощью hasClass
Суть проверки в следующем, у вас есть элемент который имеет два состояния, видимый и скрытый, эти состояния вы регулируете с помощью классов.
Например
есть элемент div, в нормальном состоянии он скрыт
а если элементу назначить класс active то он видим.
И вы проверяете наличие класса который показывает, скрыт ли элемент или видим
Пример кода
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<style>
.menu .block-text {
display: none;
}
.menu .block-text.active {
display: block;
}
</style>
<div class="menu">
<div class="btn">Показать</div>
<div class="block-text">Скрытый текст</div>
</div>
<script>
$('.menu .btn').on('click', function (e) {
if ($('.block-text').hasClass('active')){
// элемент виден
$('.block-text').removeClass('active');
} else {
// элемент скрыт
$('.block-text').addClass('active');
}
return false;
});
</script>
</body>
</html>