¿Cómo puedo ocultar un elemento usando Twitter Bootstrap y mostrarlo usando jQuery?

Question 1

Digamos que creo un elemento HTML como este,

<div id="my-div" class="hidden">Hello, TB3</div>
<div id="my-div" class="hide">Hello, TB4</div>
<div id="my-div" class="d-none">Hello, TB4</div>

¿Cómo podría mostrar y ocultar ese elemento HTML de jQuery/JavaScript?

JavaScript:

$(function(){
  $("#my-div").show();
});

Resultado: (con cualquiera de estos).

Me gustaría que los elementos anteriores estén ocultos.

¿Cuál es la forma más sencilla de ocultar un elemento usando Bootstrap y mostrarlo usando jQuery?

Question 2

La respuesta correcta

Bootstrap 4.x

Bootstrap 4.x usa el nuevo .d-none clase. En lugar de usar cualquiera .hiddeno .hide si está usando Bootstrap 4.x use .d-none.

<div id="myId" class="d-none">Foobar</div>

Para mostrarlo: $("#myId").removeClass('d-none');
Para ocultarlo: $("#myId").addClass('d-none');
Para cambiarlo: $("#myId").toggleClass('d-none');

(gracias al comentario de Fangming)

Bootstrap 3.x

Primero, no uses .hide! Usar .hidden. Como han dicho otros, .hide es obsoleto,

.hide está disponible, pero no siempre afecta a los lectores de pantalla y está obsoleto a partir de v3.0.1

En segundo lugar, use jQuery’s .toggleClass(), .addClass() y .removeClass()

<div id="myId" class="hidden">Foobar</div>

Para mostrarlo: $("#myId").removeClass('hidden');
Para ocultarlo: $("#myId").addClass('hidden');
Para cambiarlo: $("#myId").toggleClass('hidden');

No uses la clase CSS .show, tiene un caso de uso muy pequeño. Las definiciones de show, hidden y invisible estan en el documentos.

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
.invisible {
  visibility: hidden;
}

Question 3

Simplemente:

$(function(){
  $("#my-div").removeClass('hide');
});

O si de alguna manera quieres que la clase siga ahí:

$(function(){
  $("#my-div").css('display', 'block !important');
});

Question 4

Usa Bootstrap .collapse en lugar de .hidden.

Más adelante en jQuery puede usar .show() o .hide() para manipularlo.

Question 5

Esta solución está en desuso. Utilice la solución más votada.

El hide La clase es útil para mantener el contenido oculto en la carga de la página.

Mi solución a esto es durante la inicialización, cambie a la ocultación de jquery:

$('.targets').hide().removeClass('hide');

Entonces show() y hide() debería funcionar con normalidad.

Question 6

Otra forma de abordar esta molestia es crear su propia clase CSS que no establezca el !importante al final de la regla, así:

.hideMe {
    display: none;
}

y usado así:

<div id="header-mask" class="hideMe"></div>

y ahora jQuery oculta obras

$('#header-mask').show();

Question 7

El método descrito por @dustin-graham es cómo lo hago yo también. Recuerde también que bootstrap 3 ahora usa “oculto” en lugar de “ocultar” según su documentación en obtener arranque. Así que haría algo como esto:

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

Luego, cada vez que use jQuery show() y hide() métodos, no habrá conflicto.

Question 8

Inicie el elemento con como tal:

<div id='foo' style="display: none"></div>

Y luego, usa el evento que quieras mostrar, como tal:

$('#foo').show();

La forma más sencilla de hacerlo, creo.

La respuesta correcta

Bootstrap 4.x

Bootstrap 3.x

¿Ha sido útil esta solución?