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?

  1. Remova a hiddenclasse do elemento
  2. Altere a propriedade de visibilidade
  3. 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.

Respostas:

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