jQuery show () para a classe css do Twitter Bootstrap oculta

89

Estou usando o Twitter Bootstrap e noto que o jQuery show()ou fadeIn()não faz o elemento DOM marcado com a classe hiddenaparecer porque as funções do jQuery apenas removem a display: noneespecificação. No entanto, o visibilityainda está definido como hidden.

Eu me pergunto qual é a melhor maneira possível de contornar isso?

Remova a hiddenclasse do elemento
Altere a propriedade de visibilidade
Sobrescrever a classe oculta em meu próprio css

Em particular, eu quero saber se consertar isso com jQuery ou css é melhor e por quê.

jquery twitter-bootstrap

— Lim H.
fonte

Eu geralmente não uso {visibilidade: oculto} porque deixa o elemento no DOM para ocupar espaço. Existe algum motivo para você fazer isso?

— isherwood

1

@isherwood O visibility: hiddené do bootstrap responsivo.

— Lim H.

124

A classe css que você está procurando é .collapse. Isso define o elemento paradisplay: none;

Portanto, o uso $('#myelement').show()funcionará corretamente.

ATUALIZAÇÃO: Bootstrap v3.3.6 atualizou .collapse de volta para:

.collapse {
  display: none;
}

— Eoinii
fonte

2

Esta deve ser a resposta aceita. Também funciona com .slideDown(), .fadeIn()etc. .hiddenno Bootstrap é para coisas que você nunca quer que sejam exibidas.

— ranzinza

É novo no bootstrap 3?

— Lim H.

Não - já o vi usado na documentação. <div class = "nav-collapse collapse"> Esta linha foi retirada dos exemplos da v2.3.2.

— Eoinii

33

Infelizmente, esta resposta não funciona mais com Boostrap 3. .collapseagora também definevisibility: hidden;

— Tom17

9

Funciona no meu Bootstrap 3?

— James McCormack

21

Isso fará desaparecer o seu elemento invisível e removerá a classe

$('#element.hidden').css('visibility','visible').hide().fadeIn().removeClass('hidden');

http://jsfiddle.net/7qxVL/

Se você realmente não precisa que o elemento seja invisível (ou seja, ocupar o espaço), você pode querer redefinir .hidden (em seu css local, não altere a fonte de bootstrap, ou melhor ainda, em seu arquivo LESS local).

— David Fregoli
fonte

Obrigado funcionou para mim! Eu simplifiquei para apenas fazer :: fadeIn (). RemoveClass ('hidden') - não há necessidade de manipular css diretamente ou ocultar.

— dbrin

1

Veja a resposta postada por @IrishJoker. Você não deve usar .hiddenpara elementos que deseja exibir usando javascript. Use em seu .collapselugar.

— ranzinza

13

Aviso:

bootstrap 3.3.0 acabou de alterar .collapse para:

.collapse {
  display: none;
  visibility: hidden;
}

O que é uma alteração importante para jQuery.show (). Tive de reverter para inlining:

<div class="alert alert-danger" style="display:none;" >
</div>

para continuar usando jQuery da seguinte maneira:

$('.alert').html("Change a few things up and try submitting again.").show()

A única classe que consegui encontrar no bootstrap 3.3.0 para aplicar apenas 'display: none' é

.navbar {
  display: none;
}

— Ted Killilea
fonte

1

Não vejo um bom motivo para o Bootstrap fazer isso. Pessoalmente, sempre tenho outro arquivo css, usado para 'substituir' as configurações de css - substituiria o .collapse para ter apenas a configuração de exibição. Dessa forma, você pode seguir em frente sem se preocupar com tudo quebrando. Dor na mensagem :(

— Eoinii

A solução no Bootstrap 3.3.x é usar .collapse('hide')e em .collapse('show')vez dos métodos jQuery. Você pode definir a visibilidade inicial diretamente no HTML por meio da classe collapse(para ocultar) ou collapse in(para mostrar). Consulte getbootstrap.com/javascript/#collapse .

— alexw

A última versão 3.3.6 reverteu essa mudança

— Eoinii

5

Eu tive o mesmo problema. Eu usei este patch:

$(function() {
  $('.hidden').hide().removeClass('hidden');
});

Então eu tive outro problema, já que meu aplicativo gera novos elementos e os adiciona / adiciona. O que finalmente fiz foi depois de gerar o novo elemento que faço:

var newEl = ...;
$(newEl).find('.hidden').hide().removeClass('hidden');

— Guyaloni
fonte

4

Para mim, foi porque o bootstrap está usando o !importanthack para ocultar e ocultar de classe.

Portanto, você não pode usar os show()métodos etc. fornecidos com jquery. Em vez disso, você precisa sobrescrever um código ainda mais horrível, sobrescrevendo o código hacky.

$('#myelement').attr('style', 'display: block !important');

! important é uma opção de último recurso e realmente não deve ser usado em uma biblioteca central como o bootstrap.

— João magnólia
fonte

4

Isso funciona, mas vou tentar a primeira resposta e mudar as classes para .collapse.

.toggleClass('hidden')

— Chloe
fonte