Como verifico se um elemento está oculto no jQuery?

7744

É possível alternar a visibilidade de um elemento, usando as funções .hide(), .show()ou .toggle()?

Como você testaria se um elemento é visible ou hidden?

Philip Morton
fonte
49
Vale ressaltar (mesmo depois de todo esse tempo), que $(element).is(":visible")funciona para o jQuery 1.4.4, mas não para o jQuery 1.3.2, no Internet & nbsp; Explorer & nbsp; 8 . Isso pode ser testado usando o útil trecho de teste de Tsvetomir Tsonev . Lembre-se de alterar a versão do jQuery, para testar em cada um.
Reuben
2
Isso está relacionado, embora uma pergunta diferente: stackoverflow.com/questions/17425543/...
Mark Schultheiss

Respostas:

9401

Como a pergunta se refere a um único elemento, esse código pode ser mais adequado:

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

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

É o mesmo que a sugestão de twernt , mas aplicada a um único elemento; e corresponde ao algoritmo recomendado nas perguntas frequentes do jQuery .

Usamos o jQuery's is () para verificar o elemento selecionado com outro elemento, seletor ou qualquer objeto jQuery. Este método percorre os elementos DOM para encontrar uma correspondência que satisfaça o parâmetro passado. Ele retornará verdadeiro se houver uma correspondência, caso contrário, retornará falso.

Tsvetomir Tsonev
fonte
164
Essa solução parece encorajar a confusão de visible=falsee display:none; considerando que a solução da Mote claramente ilita os codificadores que pretendem verificar a display:none; (via menção de esconder e mostrar que o controle display:nonenão visible=true)
kralco626
93
Isso está correto, mas :visibletambém verificará se os elementos pai estão visíveis, como chiborg apontou.
Tsvetomir Tsonev
45
Você tem razão - deixarei claro que o código verifica apenas a displaypropriedade. Dado que a pergunta original é para show()e hide(), e eles definem display, minha resposta está correta. Pela maneira como funciona com o IE7, aqui está um trecho de teste - jsfiddle.net/MWZss ;
Tsvetomir Tsonev
53
Na verdade, achei melhor as palavras da lógica reversa:! $ ('Selector'). Is (': hidden'); por algum motivo. Vale a pena tentar.
Kzqai
21
Aqui está um teste de benchmark simples () em relação ao regexp: jsperf.com/jquery-is-vs-regexp-for-css-visibility . Conclusão: se você deseja desempenho, use regexp over is () (uma vez que is () procura todos os nós ocultos primeiro antes de observar o elemento real).
precisa
1459

Você pode usar o hiddenseletor:

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

E o visibleseletor:

// Matches all elements that are visible
$('element:visible')
twernt
fonte
67
tenha cuidado, há algumas dicas relacionadas ao bom desempenho nesta apresentação: addyosmani.com/jqprovenperformance
codecraig
27
Nas páginas 21 a 28, mostra quão lento: hidden ou: visible é comparado a outros seletores. Obrigado por apontar isso.
Etienne Dupuis
109
Quando você lida com alguns elementos e muito pouco está acontecendo - ou seja, a MAIORIA ABSOLUTAMENTE VASTA DE CASO - a questão do tempo é uma preocupação ridiculamente menor. Oh não! Foram necessários 42 ms em vez de 19 ms !!!
vbullinger
16
Estou alternando o elemento manualmente usando esse seletor. $ ('elemento: oculto') é sempre verdadeiro para mim!
ZoomIn
15
@cwingrav Você pode querer reler a documentação: oculto se aplica a todos os elementos. Os elementos de formulário com type="hidden"são apenas um caso que pode ser acionado: oculto. Elementos sem altura e largura, elementos com display: nonee antepassados ​​ocultos também serão qualificados como: ocultos.
Joshua Walsh
950
if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // 'element' is hidden
}

O método acima não considera a visibilidade do pai. Para considerar os pais também, você deve usar .is(":hidden")ou .is(":visible").

Por exemplo,

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

O método acima será considerado div2visível enquanto :visiblenão estiver . Mas o acima exposto pode ser útil em muitos casos, especialmente quando você precisa descobrir se há algum erro divs visível no pai oculto, porque nessas condições :visiblenão funcionará.

Mote
fonte
131
Isso verifica apenas a propriedade de exibição de um único elemento. O atributo: visible verifica também a visibilidade dos elementos pai.
precisa saber é o seguinte
16
Esta é a única solução que funcionou para mim ao testar com o IE 8.
evanmcd
20
@chiborg Sim, mas às vezes isso é o que você quer e eu tive que aprender da maneira mais difícil como "inteligente" jQuery era ...
Casey
9
Isso faz responder à pergunta, sendo a pergunta é sobre um único elemento e usando os hide(), show()e toggle()funções, no entanto, como a maioria já disse, nós devemos usar os :visiblee :hiddenpseudo-classes.
Jimmy Knoot
2
Esta resposta pode ser usada quando um elemento existe, mas não está atualmente na página, como após desanexar ().
Atheaos
526

Nenhuma dessas respostas aborda o que eu entendo ser a pergunta, que é o que eu estava procurando: "Como manejo itens que possuem visibility: hidden?" . Nem :visiblenem :hiddenvai lidar com isso, como ambos estão olhando para exibição de acordo com a documentação. Tanto quanto pude determinar, não há seletor para lidar com a visibilidade CSS. Aqui está como eu o resolvi (seletores jQuery padrão, pode haver uma sintaxe mais condensada):

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});
aaronLile
fonte
18
Essa resposta é boa de lidar visibilityliteralmente, mas a pergunta era How you would test if an element has been hidden or shown using jQuery?. Usar jQuery significa: a displaypropriedade
MarioDS
10
Elementos com visibility: hiddenou opacity: 0são considerados visíveis, pois ainda consomem espaço no layout. Consulte a resposta de Pedro Rainho e a documentação do jQuery no :visibleseletor.
temor
9
você precisa percorrer o DOM para verificar os pais do nó; caso contrário, isso é inútil.
Vsync
390

De Como determino o estado de um elemento alternado?


Você pode determinar se um elemento está recolhido ou não, usando os seletores :visiblee :hidden.

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

Se você estiver simplesmente atuando em um elemento com base em sua visibilidade, poderá apenas incluir :visibleou :hiddenna expressão do seletor. Por exemplo:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');
user574889
fonte
4
perguntando por que nenhuma resposta menciona o caso quando o elemento é movido longe da janela visível, como top:-1000px... acho que é um caso borda
jazzcat
295

Freqüentemente, ao verificar se algo está visível ou não, você irá imediatamente em frente e fará outra coisa com ele. O encadeamento jQuery facilita isso.

Portanto, se você possui um seletor e deseja executar alguma ação nele apenas se estiver visível ou oculto, poderá usar filter(":visible")oufilter(":hidden") segui-lo encadeando-o com a ação que deseja executar.

Então, em vez de uma ifdeclaração, assim:

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

Ou mais eficiente, mas ainda mais feia:

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

Você pode fazer tudo em uma linha:

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });
Simon_Weaver
fonte
25
Não há motivo para extrair o nó DOM no trecho usado no exemplo e, em seguida, é necessário procurá-lo novamente. Melhor fazer: var $ button = $ ('# btnUpdate'); E então, nas expressões If, use o botão $ em vez de $ (botão). Tem a vantagem de armazenar em cache o objeto jQuery.
precisa saber é o seguinte
1
Aqui está um exemplo simples: jquerypot.com/…
Ketan Savaliya
242

O :visibleseletor de acordo com a documentação do jQuery :

  • Eles têm um displayvalor CSS de none.
  • Eles são elementos de formulário com type="hidden".
  • Sua largura e altura são explicitamente definidas como 0.
  • Um elemento ancestral está oculto, portanto, o elemento não é mostrado na página.

Elementos com visibility: hiddenou opacity: 0são considerados visíveis, pois ainda consomem espaço no layout.

Isso é útil em alguns casos e inútil em outros, porque se você deseja verificar se o elemento está visível ( display != none), ignorando a visibilidade dos pais, você verá que.css("display") == 'none' não é apenas mais rápido, mas também retornará a verificação de visibilidade corretamente.

Se você deseja verificar a visibilidade em vez da exibição, use: .css("visibility") == "hidden" .

Leve também em consideração as notas adicionais do jQuery :

Como :visibleé uma extensão jQuery e não faz parte da especificação CSS, as consultas que usam :visiblenão podem tirar proveito do aumento de desempenho fornecido pelo querySelectorAll()método DOM nativo . Para obter o melhor desempenho ao usar :visiblepara selecionar elementos, primeiro selecione os elementos usando um seletor CSS puro e, em seguida, use .filter(":visible").

Além disso, se você está preocupado com o desempenho, deve verificar Agora você me vê ... mostrar / ocultar o desempenho (04-05-2010). E use outros métodos para mostrar e ocultar elementos.

Pedro Rainho
fonte
214

Isso funciona para mim e estou usando show()e hide()para tornar minha div oculta / visível:

if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}
Abiy
fonte
213

Como a visibilidade do elemento e o jQuery funcionam ;

Um elemento pode estar oculto com display:none, visibility:hiddenou opacity:0. A diferença entre esses métodos:

  • display:none oculta o elemento e não ocupa espaço;
  • visibility:hidden oculta o elemento, mas ainda ocupa espaço no layout;
  • opacity:0oculta o elemento como "visibilidade: oculto" e ainda ocupa espaço no layout; a única diferença é que a opacidade permite tornar um elemento parcialmente transparente;

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

    Métodos úteis de alternância do jQuery:

    $('.click').click(function() {
      $('.target').toggle();
    });
    
    $('.click').click(function() {
      $('.target').slideToggle();
    });
    
    $('.click').click(function() {
      $('.target').fadeToggle();
    });
webvitaly
fonte
20
Outra diferença entre visibility:hiddene opacity:0é que o elemento ainda responderá a eventos (como cliques) com opacity:0. Eu aprendi esse truque ao criar um botão personalizado para upload de arquivos.
urraka
1
Também se você ocultar entrada com opacidade: 0, ele ainda é selecionado com a tecla tab
YangombiUmpakati
161

Você também pode fazer isso usando JavaScript simples:

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

Notas:

  1. Funciona em qualquer lugar

  2. Funciona para elementos aninhados

  3. Funciona para CSS e estilos embutidos

  4. Não requer uma estrutura

Matt Brock
fonte
6
Funciona um pouco diferente do jQuery; considera visibility: hiddenser visível .
20912 alex
4
É fácil alterar o código acima para imitar o comportamento (indiscutivelmente estúpido) do jQuery. . . . . função isRendered (o) {if ((o.nodeType! = 1) || (o == document.body)) {return true;} if (o.currentStyle && o.currentStyle ["display"]! = "none") {return isRendered (o.parentNode);} else if (window.getComputedStyle) {if (document.defaultView.getComputedStyle (o, null) .getPropertyValue ("display")! = "none") {return isRendered (o.parentNode );}} return false;} #
Matt Brock
3
Claro, eu estava apenas adicionando isso para o benefício de usuários que usaram isso sem verificar seu código. :) #
26912 alex
160

Eu usaria classe CSS .hide { display: none!important; } .

Por esconder / mostrar, eu ligo .addClass("hide")/.removeClass("hide"). Para verificar a visibilidade, eu uso.hasClass("hide") .

É uma maneira simples e clara de verificar / ocultar / mostrar elementos, se você não planeja usar .toggle()ou .animate()métodos.

Evgeny Levin
fonte
11
.hasClass('hide')não verifica se um ancestral do pai está oculto (o que também o ocultaria). Você poderia fazer isso funcionar corretamente verificando se .closest('.hide').length > 0, mas por que reinventar a roda?
nbrooks
1
A variante que você propõe retorna se o elemento visível em html, minha variante retorna se o elemento foi diretamente oculto pelo seu código javascript / mecanismo de exibição. Se você sabe que os elementos pai nunca devem ser ocultos - use .hasClass () para ser mais rigoroso e evitar futuros erros. Se você quiser verificar não apenas a visibilidade, mas também o estado do elemento definido - use .hasClass () também. Em outros casos .closest () é melhor.
Evgeny Levin
1
Por que você não usa apenas .is (": visible")?
dont_trust_me
138

Link de demonstração

$('#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"/>

Fonte:

Blogger Plug n Play - Ferramentas e Widgets do jQuery: Como ver se o elemento está oculto ou visível usando o jQuery

Code Spy
fonte
1
@Adrew, mas este link está mostrando um exemplo prático dessa função. Eu acho que uma resposta prática pode pesar mais de uma página inteira de texto :)
Código Spy
133

Pode-se simplesmente usar o atributo hiddenou visible, como:

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

Ou você pode simplificar o mesmo com é como segue.

$(element).is(":visible")
Escorpião
fonte
130

ebdivdeve estar definido como style="display:none;". Funciona para mostrar e ocultar:

$(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });    
});
Vaishu
fonte
118

Outra resposta que você deve levar em consideração é que, se você está ocultando um elemento, deve usar o jQuery , mas em vez de ocultá-lo, remova todo o elemento, mas copia o conteúdo HTML e a própria tag em uma variável do jQuery e, em seguida, tudo o que você precisa fazer é testar se existe uma tag na tela, usando o normal if (!$('#thetagname').length).

Lucas
fonte
100

Ao testar um elemento contra o :hiddenseletor no jQuery, deve-se considerar que um elemento posicionado absoluto pode ser reconhecido como oculto, embora seus elementos filhos sejam visíveis .

Isso parece um tanto contra-intuitivo em primeiro lugar - embora uma análise mais detalhada da documentação do jQuery forneça as informações relevantes:

Os elementos podem ser considerados ocultos por vários motivos: [...] Sua largura e altura são explicitamente definidas como 0. [...]

Portanto, isso realmente faz sentido em relação ao modelo de caixa e ao estilo calculado para o elemento. Mesmo que a largura e a altura não sejam explicitamente definidas como 0, elas podem ser definidas implicitamente .

Veja o seguinte exemplo:

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>


Atualização para o jQuery 3.x:

Com o jQuery 3, o comportamento descrito mudará! Os elementos serão considerados visíveis se tiverem caixas de layout, incluindo as de largura e / ou altura zero.

JSFiddle com jQuery 3.0.0-alpha1:

http://jsfiddle.net/pM2q3/7/

O mesmo código JavaScript terá esta saída:

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false
conceptdeluxe
fonte
90

Isso pode funcionar:

expect($("#message_div").css("display")).toBe("none");
Maneesh Kumar
fonte
7
Que idioma / dialeto / biblioteca é esse? Eu não estou familiarizado com esta sintaxe em JS ...
nbrooks
74

Exemplo:

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

Irfan DANISH
fonte
66

Para verificar se não está visível, eu uso !:

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

Ou a seguir, também é o sam, salvando o seletor jQuery em uma variável para obter melhor desempenho quando você precisar dele várias vezes:

var $book = $('#book')

if(!$book.is(':visible')) {
    alert('#book is not visible')
}
Matthias Wegtun
fonte
1
Como você determinou que salvar um seletor na variável é realmente mais rápido?
Ilia Rostovtsev
3
Olá @Ilia Rostovtsev jsperf.com/caching-jquery-selectors Lá você pode executar o teste. De qualquer forma, é bom tê-lo em cache para que ele possa ser acessado mais rápido
Matthias Wegtun
2
Isso é adequado se você deseja usar uma única variável durante todo o processo, em vez de chamar e chamar o mesmo objeto.
Kenneth Palaganas
60

Use alternância de classe, não edição de estilo. . .

Usar classes designadas para "ocultar" elementos é fácil e também um dos métodos mais eficientes. Alternar uma classe 'oculta' com um Displayestilo 'none' terá um desempenho mais rápido do que editar diretamente esse estilo. Expliquei isso bastante bem na pergunta Stack Overflow: Tornando dois elementos visíveis / ocultos na mesma div .


Práticas recomendadas e otimização de JavaScript

Aqui está um vídeo verdadeiramente esclarecedor de um Google Tech Talk do engenheiro front-end do Google, Nicholas Zakas:

Assimétrico
fonte
60

Exemplo de uso da verificação visível do adblocker é ativado:

$(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" é um ID que o bloqueador de anúncios bloqueia. Portanto, verificando se está visível, você pode detectar se o bloqueador de anúncios está ativado.

Roman Losev
fonte
58

Afinal, nenhum dos exemplos combina comigo, então escrevi o meu.

Testes (sem suporte do Internet Explorer filter:alpha):

a) Verifique se o documento não está oculto

b) Verifique se um elemento tem largura / altura / opacidade zero ou display:none/ visibility:hiddennos estilos embutidos

c) Verifique se o centro (também porque é mais rápido que testar todos os pixels / cantos) do elemento não está oculto por outro elemento (e todos os ancestrais, por exemplo: overflow:hidden / scroll / um elemento sobre outro) ou bordas da tela

d) Verifique se um elemento possui largura / altura / opacidade ou display:nonevisibilidade zero : oculto nos estilos computados (entre todos os ancestrais)

Testado em

Android 4.4 (navegador nativo / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (modos de documento do Internet Explorer 5-11 + Internet Explorer 8 em um máquina virtual) e 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;
    }
})();

Como usar:

is_visible(elem) // boolean
Aleko
fonte
50

Você precisa verificar os dois ... Display e visibilidade:

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

Se procurarmos $(this).is(":visible"), o jQuery verificará as duas coisas automaticamente.

Premshankar Tiwari
fonte
41

Talvez você possa fazer algo assim

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

Mathias Stavrou
fonte
37

Basta verificar a visibilidade, verificando um valor booleano, como:

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

Eu usei esse código para cada função. Caso contrário, você pode usar is(':visible')para verificar a visibilidade de um elemento.

pixellabme
fonte
34

Porque Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout(como descrito para jQuery: visible Selector ) - podemos verificar se o elemento é realmente visível desta maneira:

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;
    }
});
Andron
fonte
30

Uma função pode ser criada para verificar a visibilidade / exibir atributos, a fim de avaliar se o elemento é mostrado na interface do usuário ou não.

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

Violino de trabalho

V31
fonte
29

Também aqui está uma expressão condicional ternária para verificar o estado do elemento e depois alterná-lo:

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
cssimsek
fonte
4
Ou, y'kno, apenas se livrar de toda a condicional e dizer $('elementToToggle').toggle('slow');...:)
nbrooks
29
if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}
Gaurav
fonte