jQuery show () para Twitter Bootstrap clase CSS oculta

89

Estoy usando Twitter Bootstrap y noto que jQuery show()o fadeIn()no hace que el elemento DOM marcado con class hiddenaparezca porque las funciones de jQuery solo eliminan la display: noneespecificación. Sin embargo, visibilitytodavía está configurado en hidden.

Me pregunto cuál es la mejor manera posible de solucionar esto.

  1. Eliminar la hiddenclase en el elemento
  2. Cambiar la propiedad de visibilidad
  3. Sobrescribir la clase oculta en mi propio CSS

En particular, quiero saber si arreglar esto con jQuery o css es mejor y por qué.

jquery twitter-bootstrap Lim H.
fuente
Generalmente no uso {visibilidad: oculta} porque deja el elemento en el DOM para ocupar espacio. ¿Hay alguna razón por la que debas hacerlo?
isherwood
1
@isherwood El visibility: hiddenes de bootstrap responsive.
Lim H.

Respuestas:

124

La clase css que estás buscando es .collapse. Esto establece el elemento endisplay: none;

Entonces el uso $('#myelement').show()funcionará correctamente.

ACTUALIZACIÓN: Bootstrap v3.3.6 ha actualizado .collapse de nuevo a:

.collapse {
  display: none;
}
Eoinii
fuente
2
Esta debería ser la respuesta aceptada. También trabaja con .slideDown(), .fadeIn(), etc. .hidden, en Bootstrap es para cosas que nunca quieres que se muestre.
snumpy
¿Es nuevo en bootstrap 3?
Lim H.
No, lo he visto usado en la documentación. <div class = "nav-collapse collapse"> Esta línea se tomó de los ejemplos de la v2.3.2.
Eoinii
33
Desafortunadamente, esta respuesta ya no funciona con Boostrap 3. .collapseahora también se establecevisibility: hidden;
Tom17
9
¿Funciona en mi Bootstrap 3?
James McCormack
21

Esto desvanecerá su elemento invisible y eliminará la clase

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

http://jsfiddle.net/7qxVL/

Si realmente no necesita que el elemento sea invisible (es decir, que ocupe el espacio), es posible que desee redefinir .hidden (en su CSS local, no cambie la fuente de arranque, o incluso mejor, en su archivo LESS local).

David Fregoli
fuente
¡Gracias funcionó para mí! Lo simplifiqué para simplemente hacer :: fadeIn (). RemoveClass ('hidden') - no es necesario manipular css directamente u ocultar.
dbrin
1
Vea la respuesta publicada por @IrishJoker. No debería usar .hiddenpara los elementos que desea mostrar usando javascript. Úselo en su .collapselugar.
snumpy
13

Advertencia:

bootstrap 3.3.0 acaba de cambiar .collapse a:

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

Lo cual es un cambio importante para jQuery.show () Tuve que volver a la alineación:

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

para continuar usando jQuery de la siguiente manera:

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

La única clase que pude encontrar en bootstrap 3.3.0 para aplicar solo 'display: none' es

.navbar {
  display: none;
}
Ted Killilea
fuente
1
No veo una buena razón para que Bootstrap haga esto. Personalmente, siempre tengo otro archivo css, que se usa para 'anular' la configuración de css; reemplazaría el .collapse para tener solo la configuración de pantalla. De esta forma, podrás seguir adelante sin preocuparte de que todo se rompa. Dolor en el mensaje :(
Eoinii
La solución en Bootstrap 3.3.x es usar .collapse('hide')y en .collapse('show')lugar de los métodos de jQuery. Puede establecer la visibilidad inicial directamente en el HTML a través de la clase collapse(ocultar) o collapse in(mostrar). Consulte getbootstrap.com/javascript/#collapse .
alexw
La última versión 3.3.6 ha revertido este cambio
Eoinii
5

Yo tuve el mismo problema. Usé este parche:

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

Luego tuve otro problema, ya que mi aplicación genera nuevos elementos y los agrega / antepone. Lo que finalmente hice fue después de generar el nuevo elemento que hago:

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

Para mí, fue porque bootstrap está usando el !importanttruco para ocultar y ocultar la clase.

Por lo tanto, no puede usar los show()métodos, etc.proporcionados con jquery. En su lugar, debe sobrescribir un código aún más horrible sobrescribiendo el código pirata.

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

! important es una opción de último recurso y realmente no debería usarse en una biblioteca central como bootstrap.

John Magnolia
fuente
4

Esto funciona, pero voy a probar la primera respuesta y cambiar las clases a .collapse.

.toggleClass('hidden')
Chloe
fuente