Как проверить, скрыт ли элемент в jQuery?

7748

Можно ли переключать видимость элемента, используя функции .hide(), .show()или .toggle()?

Как бы вы проверили, является ли элемент visibleили hidden?

Филип Мортон
источник
49
Стоит упомянуть (даже после всего этого времени), что $(element).is(":visible")работает для jQuery 1.4.4, но не для jQuery 1.3.2, в Internet & nbsp; Explorer & nbsp; 8 . Это можно проверить с помощью полезного фрагмента теста Цветомира Цонева . Просто не забудьте изменить версию jQuery, чтобы протестировать под каждой.
Рувим
2
Это связано, хотя с другим вопросом: stackoverflow.com/questions/17425543/…
Марк Шультхайс,

Ответы:

9403

Поскольку вопрос относится к одному элементу, этот код может быть более подходящим:

// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");

// The same works with hidden
$(element).is(":hidden");

Это то же самое, что и предложение Твернта , но применяется к одному элементу; и он соответствует алгоритму, рекомендованному в FAQ по jQuery .

Мы используем jQuery's is () для проверки выбранного элемента с помощью другого элемента, селектора или любого объекта jQuery. Этот метод перемещается по элементам DOM, чтобы найти совпадение, которое удовлетворяет переданному параметру. Он вернет true, если есть совпадение, иначе вернет false.

Цветомир Цонев
источник
165
Это решение, кажется, поощряет путаницу visible=falseи display:none; в то время как решение Моте явно не учитывает намерение кодеров проверить display:none; (через упоминание о display:nonevisible=true
прятках,
94
Это правильно, но :visibleтакже проверит, видимы ли родительские элементы, как указал Чиборг.
Цветомир Цонев
46
У вас есть точка - я поясню, что код проверяет только для displayсвойства. Учитывая, что оригинальный вопрос для show()и hide(), и они задают display, мой ответ правильный. Кстати, он работает с IE7, вот тестовый фрагмент - jsfiddle.net/MWZss ;
Цветомир Цонев
54
На самом деле я обнаружил, что слова с обратной логикой лучше:! $ ('Селектор'). Is (': hidden'); по какой-то причине. Стоит попробовать.
Kzqai
22
Вот простое тестирование производительности () для регулярного выражения: jsperf.com/jquery-is-vs-regexp-for-css-visibility . Вывод: если вы стремитесь к производительности, используйте regexp over is () (поскольку is () сначала ищет все скрытые узлы, прежде чем посмотреть на фактический элемент).
Макс Леске
1461

Вы можете использовать hiddenселектор:

// Matches all elements that are hidden
$('element:hidden')

И visibleселектор:

// Matches all elements that are visible
$('element:visible')
twernt
источник
68
только будьте осторожны, в этой презентации есть несколько хороших советов по производительности: addyosmani.com/jqprovenperformance
codecraig
28
На страницах с 21 по 28 показано, как медленно: скрытый или: видимый сравнивается с другими селекторами. Спасибо за указание этого.
Этьен Дюпюи
110
Когда вы имеете дело с парой элементов, и очень мало что происходит - то есть АБСОЛЮТНО БОЛЬШОЕ БОЛЬШИНСТВО СЛУЧАЙ - проблема времени является смехотворно незначительной. О нет! Это заняло 42 мс вместо 19 мс !!!
vbullinger
17
Я переключаю элемент с помощью этого селектора. $ ('element: hidden') всегда верно для меня!
ZoomIn
16
@cwingrav Вы можете перечитать документацию: скрытый относится ко всем элементам. Элементы формы с type="hidden"одним только случаем, который может вызвать: скрытый. Элементы без высоты и ширины, элементы с display: noneи элементы со скрытыми предками также будут квалифицироваться как: скрытые.
Джошуа Уолш
952
if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // 'element' is hidden
}

Вышеуказанный метод не учитывает видимость родителя. Чтобы рассмотреть и родителя, вы должны использовать .is(":hidden")или .is(":visible").

Например,

<div id="div1" style="display:none">
  <div id="div2" style="display:block">Div2</div>
</div>

Приведенный выше способ будет считать div2видимым, пока :visibleнет. Но вышеупомянутое может быть полезно во многих случаях, особенно когда вам нужно выяснить, есть ли какие-либо ошибки, видимые в скрытом родительском элементе, потому что в таких условиях:visible не будет работать.

соринка
источник
132
Это проверяет только для свойства отображения одного элемента. Атрибут: visible проверяет также видимость родительских элементов.
Чиборг
17
Это единственное решение, которое работало для меня при тестировании с IE 8.
evanmcd
21
@chiborg Да, но иногда это то, что вы хотите, и мне пришлось нелегко узнать, насколько «умным» был jQuery ...
Кейси,
9
Это действительно отвечает на вопрос, является вопрос о одном элементе и с помощью hide(), show()и toggle()функции, однако, как большинство из них уже сказал, мы должны использовать :visibleи :hiddenпсевдо-классы.
Джимми Ноот
2
Этот ответ можно использовать, когда элемент существует, но в данный момент отсутствует на странице, например, после detach ().
atheaos
527

Ни один из этих ответов не относится к тому, что я понимаю, как к вопросу, который я искал: «Как мне обращаться с предметами, которые имеют visibility: hidden, Ни с этим, :visibleни :hiddenс этим не справятся, так как они оба ищут показ согласно документации. Насколько я мог определить, нет селектора для обработки видимости CSS. Вот как я решил (стандартные селекторы jQuery, может быть более сжатый синтаксис):

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});
aaronLile
источник
18
С этим ответом хорошо обращаться visibilityбуквально, но вопрос был How you would test if an element has been hidden or shown using jQuery?. Использование jQuery означает: displayсвойство.
MarioDS
10
Элементы с visibility: hiddenили opacity: 0считаются видимыми, поскольку они по-прежнему занимают место в макете. См. Ответ Педро Райнхо и документацию jQuery о :visibleселекторе.
благосклонность
9
вам нужно пройти DOM, чтобы проверить родителей узла, иначе это бесполезно.
vsync
391

Из Как определить состояние переключаемого элемента?


Вы можете определить , свернут ли элемент или нет, используя :visibleи :hiddenселекторы.

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');

Если вы просто воздействуете на элемент в зависимости от его видимости, вы можете просто включить :visibleили :hiddenв выражение селектора. Например:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');
user574889
источник
4
Интересно, почему в ответе не упоминается случай, когда элемент удален от видимого окна, например top:-1000px... Думаю, это
крайний
296

Часто, проверяя, является ли что-то видимым или нет, вы сразу же идете прямо вперед и делаете с этим что-то еще. JQuery цепочка делает это легко.

Поэтому, если у вас есть селектор, и вы хотите выполнить какое-либо действие с ним, только если он видим или скрыт, вы можете использовать filter(":visible")илиfilter(":hidden") следовать за ним, добавив в цепочку действие, которое вы хотите выполнить.

Таким образом, вместо ifзаявления, как это:

if ($('#btnUpdate').is(":visible"))
{
     $('#btnUpdate').animate({ width: "toggle" });   // Hide button
}

Или более эффективный, но еще более уродливый

var button = $('#btnUpdate');
if (button.is(":visible"))
{
     button.animate({ width: "toggle" });   // Hide button
}

Вы можете сделать все это в одну строку:

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });
Simon_Weaver
источник
25
Нет причин извлекать узел DOM из фрагмента, использованного в примере, а затем искать его снова. Лучше просто сделать: var $ button = $ ('# btnUpdate'); А затем в выражениях If просто используйте кнопку $ вместо $ (кнопка). Имеет преимущество кэширования объекта jQuery.
LocalPCGuy
1
Вот простой пример jquerypot.com/…
Кетан Савалия,
242

:visibleСелектор в соответствии с документацией JQuery :

  • У них есть displayзначение CSSnone .
  • Они являются элементами формы с type="hidden" .
  • Их ширина и высота явно установлены на 0.
  • Элемент-предок скрыт, поэтому элемент не отображается на странице.

Элементы с visibility: hiddenили opacity: 0считаются видимыми, поскольку они по-прежнему занимают место в макете.

Это полезно в некоторых случаях и бесполезно в других, потому что если вы хотите проверить, является ли элемент видимым ( display != none), игнорируя видимость родителей, вы обнаружите, что делаете.css("display") == 'none' не только быстрее, но и вернет проверку видимости правильно.

Если вы хотите проверить видимость вместо отображения, вы должны использовать: .css("visibility") == "hidden" .

Также примите во внимание дополнительные примечания jQuery :

Поскольку :visibleэто расширение jQuery, а не часть спецификации CSS, использование запросов :visibleне может воспользоваться преимуществами повышения производительности, обеспечиваемыми собственным querySelectorAll()методом DOM . Чтобы добиться максимальной производительности при использовании :visibleдля выбора элементов, сначала выберите элементы с помощью чистого селектора CSS, а затем используйте .filter(":visible").

Кроме того, если вы беспокоитесь о производительности, вам следует проверить Теперь вы видите меня… показать / скрыть производительность (2010-05-04). И используйте другие методы, чтобы показать и скрыть элементы.

Педро Рейнхо
источник
214

Это работает для меня, и я использую show()и hide()чтобы сделать мой div скрытым / видимым:

if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}
Abiy
источник
213

Как работает видимость элемента и jQuery ;

Элемент может быть скрыт с display:none, visibility:hiddenили opacity:0. Разница между этими методами:

  • display:none скрывает элемент и не занимает места;
  • visibility:hidden скрывает элемент, но все равно занимает место в макете;
  • opacity:0скрывает элемент как «видимость: скрытый», и он все еще занимает место в макете; единственное отличие состоит в том, что непрозрачность позволяет сделать элемент частично прозрачным;

    if ($('.target').is(':hidden')) {
      $('.target').show();
    } else {
      $('.target').hide();
    }
    if ($('.target').is(':visible')) {
      $('.target').hide();
    } else {
      $('.target').show();
    }
    
    if ($('.target-visibility').css('visibility') == 'hidden') {
      $('.target-visibility').css({
        visibility: "visible",
        display: ""
      });
    } else {
      $('.target-visibility').css({
        visibility: "hidden",
        display: ""
      });
    }
    
    if ($('.target-visibility').css('opacity') == "0") {
      $('.target-visibility').css({
        opacity: "1",
        display: ""
      });
    } else {
      $('.target-visibility').css({
        opacity: "0",
        display: ""
      });
    }

    Полезные методы переключения jQuery:

    $('.click').click(function() {
      $('.target').toggle();
    });
    
    $('.click').click(function() {
      $('.target').slideToggle();
    });
    
    $('.click').click(function() {
      $('.target').fadeToggle();
    });
webvitaly
источник
20
Другое различие между visibility:hiddenи opacity:0заключается в том, что элемент будет по-прежнему реагировать на события (например, щелчки) opacity:0. Я узнал этот трюк, создав пользовательскую кнопку для загрузки файлов.
уррака
1
также, если вы скрываете ввод с непрозрачностью: 0, он по-прежнему выбирается с помощью клавиши табуляции
YangombiUmpakati
161

Вы также можете сделать это с помощью простого JavaScript:

function isRendered(domObj) {
    if ((domObj.nodeType != 1) || (domObj == document.body)) {
        return true;
    }
    if (domObj.currentStyle && domObj.currentStyle["display"] != "none" && domObj.currentStyle["visibility"] != "hidden") {
        return isRendered(domObj.parentNode);
    } else if (window.getComputedStyle) {
        var cs = document.defaultView.getComputedStyle(domObj, null);
        if (cs.getPropertyValue("display") != "none" && cs.getPropertyValue("visibility") != "hidden") {
            return isRendered(domObj.parentNode);
        }
    }
    return false;
}

Ноты:

  1. Работает везде

  2. Работает для вложенных элементов

  3. Работает для CSS и встроенных стилей

  4. Не требует рамки

Мэтт Брок
источник
6
Работает немного иначе, чем в jQuery; он считает visibility: hidden, что видно .
Алекс
4
Достаточно легко изменить приведенный выше код, чтобы имитировать (возможно, глупое) поведение jQuery. , , , , function isRendered (o) {if ((o.nodeType! = 1) || (o == document.body)) {return true;} if (o.currentStyle && o.currentStyle ["display"]! = "none") {return isRendered (o.parentNode);} иначе if (window.getComputedStyle) {if (document.defaultView.getComputedStyle (o, null) .getPropertyValue ("display")! = "none") {return isRendered (o.parentNode );}} вернуть false;}
Мэтт Брок,
3
Конечно, я просто добавил это для пользователей, которые использовали это без сканирования его кода. :)
alex
160

Я бы использовал CSS класс .hide { display: none!important; } .

Для сокрытия / показа я звоню .addClass("hide")/.removeClass("hide"). Для проверки видимости я использую.hasClass("hide") .

Это простой и понятный способ проверить / скрыть / показать элементы, если вы не планируете использовать методы .toggle()или .animate()методы.

Евгений Левин
источник
11
.hasClass('hide')не проверяет, является ли предок родителя скрытым (что также сделало бы его скрытым). Вы могли бы заставить это работать правильно, проверив .closest('.hide').length > 0, но зачем изобретать велосипед?
nbrooks
1
Вариант, который вы предлагаете, возвращает, если элемент виден в html, мой вариант возвращает, если элемент был непосредственно скрыт вашим движком кода JavaScript / представления. Если вы знаете, что родительские элементы никогда не должны быть скрыты - используйте .hasClass (), чтобы быть более строгими и предотвратить будущие ошибки. Если вы хотите проверить не только видимость, но и состояние элемента, установленного - тоже используйте .hasClass (). В других случаях лучше .closest ().
Евгений Левин
1
Почему вы просто не используете .is (": visible")?
dont_trust_me
138

Демо-ссылка

$('#clickme').click(function() {
  $('#book').toggle('slow', function() {
    // Animation complete.
    alert($('#book').is(":visible")); //<--- TRUE if Visible False if Hidden
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">
  Click here
</div>
<img id="book" src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png" alt="" width="300"/>

Источник:

Blogger Plug n Play - Инструменты и виджеты jQuery: как узнать, скрыт ли элемент или виден с помощью jQuery

Код Шпион
источник
1
@ Adrew, но по этой ссылке показан рабочий пример этой функции. Я думаю, что практический ответ может весить по всей странице текста :)
Code Spy
133

Можно просто использовать атрибут hiddenor visible, например:

$('element:hidden')
$('element:visible')

Или вы можете упростить то же самое с IS следующим образом .

$(element).is(":visible")
скорпион
источник
130

ebdivдолжен быть установлен в style="display:none;". Это работает как для показа, так и для скрытия:

$(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });    
});
Vaishu
источник
118

Другой ответ, который вы должны принять во внимание: если вы скрываете элемент, вы должны использовать jQuery , но вместо того, чтобы фактически скрыть его, вы удаляете весь элемент, но копируете его HTML- содержимое и сам тег в переменную jQuery, а затем все, что вам нужно сделать, это проверить, есть ли такой тег на экране, используя обычный if (!$('#thetagname').length).

Лукас
источник
100

При тестировании элемента с :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/

Тот же код JavaScript будет иметь такой вывод:

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false
conceptdeluxe
источник
90

Это может работать:

expect($("#message_div").css("display")).toBe("none");
Маниш Кумар
источник
7
Какой это язык / диалект / библиотека? Я не знаком с этим синтаксисом в JS ...
nbrooks
74

Пример:

$(document).ready(function() {
  if ($("#checkme:hidden").length) {
    console.log('Hidden');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkme" class="product" style="display:none">
  <span class="itemlist"><!-- Shows Results for Fish --></span> Category:Fish
  <br>Product: Salmon Atlantic
  <br>Specie: Salmo salar
  <br>Form: Steaks
</div>

Ирфан Даниш
источник
66

Чтобы проверить, если он не виден, я использую !:

if ( !$('#book').is(':visible')) {
    alert('#book is not visible')
}

Или следующее также sam, сохраняя селектор jQuery в переменной, чтобы иметь лучшую производительность, когда вам это нужно несколько раз:

var $book = $('#book')

if(!$book.is(':visible')) {
    alert('#book is not visible')
}
Матиас Вегтун
источник
1
Как вы определили, что сохранение селектора в переменной действительно быстрее?
Илья Ростовцев
3
Привет @Ilia Rostovtsev jsperf.com/caching-jquery-selectors Там вы можете запустить тест. В любом случае, приятно иметь кеширование, чтобы к нему можно было быстрее обращаться
Матиас Вегтун
2
Это подходит, если вы хотите использовать одну переменную в процессе вместо вызова и вызова одного и того же объекта.
Кеннет Палаганас
60

Используйте переключение классов, а не редактирование стилей. , ,

Использование классов, предназначенных для «сокрытия» элементов, легко, а также является одним из наиболее эффективных методов. Переключение класса «скрытый» со Displayстилем «нет» будет выполняться быстрее, чем непосредственное редактирование этого стиля. Я довольно подробно объяснил это в вопросе переполнения стека. Превращение двух элементов, видимых / скрытых в одном и том же элементе div .


Лучшие практики и оптимизация JavaScript

Вот действительно поучительное видео Google Tech Talk, созданного инженером Google Николасом Закасом:

кривобокий
источник
60

Пример использования видимой проверки для adblocker активирован:

$(document).ready(function(){
  if(!$("#ablockercheck").is(":visible"))
    $("#ablockermsg").text("Please disable adblocker.").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ad-placement" id="ablockercheck"></div>
<div id="ablockermsg" style="display: none"></div>

«ablockercheck» - это идентификатор, который блокирует adblocker. Поэтому, проверив, виден ли он, вы можете определить, включен ли adblocker.

Роман Лосев
источник
58

В конце концов, ни один из примеров меня не устраивает, поэтому я написал свой собственный.

Тесты (без поддержки Internet Explorerfilter:alpha ):

а) Проверьте, не скрыт ли документ

б) Проверьте, имеет ли элемент нулевую ширину / высоту / непрозрачность или display:none/visibility:hidden во встроенных стилях

c) Убедитесь, что центр (и потому что он быстрее, чем тестирование каждого пикселя / угла) элемента не скрыт другим элементом (и всеми предками, например: overflow:hidden/ scroll / один элемент над другим) или краями экрана

d) Проверьте, имеет ли элемент нулевую ширину / высоту / непрозрачность или display:none/ видимость: скрыто в вычисляемых стилях (среди всех предков)

Проверено на

Android 4.4 (собственный браузер / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (режимы документов Internet Explorer 5-11 + Internet Explorer 8 на компьютере). виртуальная машина) и Safari (Windows / Mac / iOS).

var is_visible = (function () {
    var x = window.pageXOffset ? window.pageXOffset + window.innerWidth - 1 : 0,
        y = window.pageYOffset ? window.pageYOffset + window.innerHeight - 1 : 0,
        relative = !!((!x && !y) || !document.elementFromPoint(x, y));
        function inside(child, parent) {
            while(child){
                if (child === parent) return true;
                child = child.parentNode;
            }
        return false;
    };
    return function (elem) {
        if (
            document.hidden ||
            elem.offsetWidth==0 ||
            elem.offsetHeight==0 ||
            elem.style.visibility=='hidden' ||
            elem.style.display=='none' ||
            elem.style.opacity===0
        ) return false;
        var rect = elem.getBoundingClientRect();
        if (relative) {
            if (!inside(document.elementFromPoint(rect.left + elem.offsetWidth/2, rect.top + elem.offsetHeight/2),elem)) return false;
        } else if (
            !inside(document.elementFromPoint(rect.left + elem.offsetWidth/2 + window.pageXOffset, rect.top + elem.offsetHeight/2 + window.pageYOffset), elem) ||
            (
                rect.top + elem.offsetHeight/2 < 0 ||
                rect.left + elem.offsetWidth/2 < 0 ||
                rect.bottom - elem.offsetHeight/2 > (window.innerHeight || document.documentElement.clientHeight) ||
                rect.right - elem.offsetWidth/2 > (window.innerWidth || document.documentElement.clientWidth)
            )
        ) return false;
        if (window.getComputedStyle || elem.currentStyle) {
            var el = elem,
                comp = null;
            while (el) {
                if (el === document) {break;} else if(!el.parentNode) return false;
                comp = window.getComputedStyle ? window.getComputedStyle(el, null) : el.currentStyle;
                if (comp && (comp.visibility=='hidden' || comp.display == 'none' || (typeof comp.opacity !=='undefined' && comp.opacity != 1))) return false;
                el = el.parentNode;
            }
        }
        return true;
    }
})();

Как пользоваться:

is_visible(elem) // boolean
Алеко
источник
50

Вы должны проверить оба ... Отображение, а также видимость:

if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
    // The element is not visible
} else {
    // The element is visible
}

Если мы проверяем $(this).is(":visible"), jQuery автоматически проверяет обе вещи.

Премшанкар Тивари
источник
41

Может быть, вы можете сделать что-то вроде этого

$(document).ready(function() {
   var visible = $('#tElement').is(':visible');

   if(visible) {
      alert("visible");
                    // Code
   }
   else
   {
      alert("hidden");
   }
});
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<input type="text" id="tElement" style="display:block;">Firstname</input>

Матиас Ставру
источник
37

Просто проверьте видимость, проверив логическое значение, например:

if (this.hidden === false) {
    // Your code
}

Я использовал этот код для каждой функции. В противном случае вы можете использовать is(':visible')для проверки видимости элемента.

pixellabme
источник
34

Потому что Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout(как описано для jQuery: visible Selector ) - мы можем проверить, действительно ли элемент виден таким образом:

function isElementReallyHidden (el) {
    return $(el).is(":hidden") || $(el).css("visibility") == "hidden" || $(el).css('opacity') == 0;
}

var booElementReallyShowed = !isElementReallyHidden(someEl);
$(someEl).parents().each(function () {
    if (isElementReallyHidden(this)) {
        booElementReallyShowed = false;
    }
});
Андрон
источник
30

Можно создать функцию для проверки атрибутов видимости / отображения, чтобы определить, отображается ли элемент в пользовательском интерфейсе или нет.

function checkUIElementVisible(element) {
    return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}

Рабочая скрипка

V31
источник
29

Также вот троичное условное выражение, чтобы проверить состояние элемента и затем переключить его:

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
cssimsek
источник
4
Или, ну, просто избавьтесь от всего условного и скажите $('elementToToggle').toggle('slow');...:)
nbrooks
29
if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}
Gaurav
источник