jquery - example - popovers bootstrap 4

jQuery show() para Twitter Bootstrap css class hidden

Question

Estoy usando Twitter Bootstrap y me doy cuenta de que jQuery show() o fadeIn() no hacen que el elemento DOM marcado con la clase hidden aparezca porque las funciones jQuery solo eliminan la display: none especificación. Sin embargo, la visibility aún está configurada como hidden .

Me pregunto cuál es la mejor manera de evitar esto?

1. Eliminar la clase hidden 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é.

Answer 1

Advertencia:

bootstrap 3.3.0 acaba de cambiar .collapse a:

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

Que es un cambio radical 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;
}

Answer 2

Esto desvanecerá tu 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, ocupe el espacio), tal vez desee redefinir .hidden (en su css local, no cambie el origen del bootstrap, o mejor aún, en su archivo LESS local).

Answer 3

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

.toggleClass(''hidden'')

Answer 4

La clase de CSS que estás buscando es .collapse . Esto establece el elemento para display: none;

Entonces, usar $(''#myelement'').show() funcionará correctamente.

ACTUALIZACIÓN: Bootstrap v3.3.6 ha actualizado .Collapse volver a:

.collapse {
  display: none;
}

Answer 5

Para mí fue porque bootstrap está usando el !important truco tanto para la clase oculta como para la oculta.

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

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

Answer 6

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 generar el nuevo elemento que hago:

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