jQuery show () per la classe css Twitter Bootstrap nascosta

89

Sto usando Twitter Bootstrap e noto che jQuery show()o fadeIn()non fa apparire l'elemento DOM contrassegnato con la classe hiddenperché le funzioni jQuery rimuovono solo la display: nonespecifica. Tuttavia, visibilityè ancora impostato su hidden.

Mi chiedo qual è il miglior modo possibile per aggirare questo problema?

Rimuovi la hiddenclasse dall'elemento
Modifica la proprietà di visibilità
Sovrascrivi la classe nascosta nel mio css

In particolare, voglio sapere se risolverlo con jQuery o css è meglio e perché.

jquery twitter-bootstrap

— Contro Lim H.
fonte

Generalmente non uso {visibilità: nascosto} perché lascia l'elemento nel DOM per occupare spazio. C'è qualche motivo per cui devi farlo?

— Isherwood

1

@isherwood The visibility: hiddenè da bootstrap responsive.

— Lim H.

124

La classe CSS che stai cercando è .collapse. Questo imposta l'elemento sudisplay: none;

Quindi l'utilizzo $('#myelement').show()funzionerà correttamente.

AGGIORNAMENTO: Bootstrap v3.3.6 ha aggiornato .collapse torna a:

.collapse {
  display: none;
}

— Eoinii
fonte

2

Questa dovrebbe essere la risposta accettata. Funziona anche con .slideDown(), .fadeIn()ecc .hiddenin Bootstrap è per cose che non desidera visualizzare.

— snumpy

È nuovo in bootstrap 3?

— Lim H.

No, l'ho visto usato nella documentazione. <div class = "nav-collapse collapse"> Questa riga è stata presa da esempi v2.3.2.

— Eoinii

33

Sfortunatamente, questa risposta non funziona più con Boostrap 3. .collapseora anche i setvisibility: hidden;

— Tom17

9

Funziona nel mio Bootstrap 3?

— James McCormack

21

Questo farà sfumare il tuo elemento invisibile e rimuoverà la classe

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

http://jsfiddle.net/7qxVL/

Se non hai davvero bisogno che l'elemento sia invisibile (cioè occupi lo spazio), allora potresti voler ridefinire .hidden (nel tuo css locale, non cambiare il sorgente di bootstrap, o meglio ancora, nel tuo file LESS locale).

— David Fregoli
fonte

Grazie ha funzionato per me! Mi sono semplificato per fare solo :: fadeIn (). RemoveClass ('hidden') - non c'è bisogno di manipolare css direttamente o nascondere.

— dbrin

1

Guarda la risposta pubblicata da @IrishJoker. Non dovresti usare .hiddenper gli elementi che vuoi visualizzare usando javascript. Usa .collapseinvece.

— Snumpy

13

Avvertimento:

bootstrap 3.3.0 è appena cambiato .collapse in:

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

Che è un cambiamento radicale per jQuery.show () ho dovuto tornare a inlining:

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

per continuare a utilizzare jQuery come segue:

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

L'unica classe che ho trovato in bootstrap 3.3.0 per applicare solo "display: none" è

.navbar {
  display: none;
}

— Ted Killilea
fonte

1

Non riesco a vedere una buona ragione per Bootstrap per farlo. Personalmente ho sempre un altro file css, usato per 'sovrascrivere' le impostazioni css - sostituirei .collapse per avere solo le impostazioni di visualizzazione. In questo modo, puoi andare avanti senza preoccuparti che tutto si rompa. Dolore nel messaggio :(

— Eoinii

La soluzione in Bootstrap 3.3.x consiste nell'usare .collapse('hide')e al .collapse('show')posto dei metodi di jQuery. È possibile impostare la visibilità iniziale direttamente nell'HTML tramite la classe collapse(da nascondere) o collapse in(da mostrare). Vedi getbootstrap.com/javascript/#collapse .

— alexw

L'ultima versione 3.3.6 ha

— annullato

5

Ho avuto lo stesso problema. Ho usato questa patch:

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

Poi ho avuto un altro problema, poiché la mia applicazione genera nuovi elementi e li aggiunge / antepone. Quello che ho finalmente fatto è dopo aver generato il nuovo elemento che faccio:

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

— guyaloni
fonte

4

Per me è stato perché bootstrap sta usando l' !importanthack sia per class hide che per hidden.

Quindi non puoi usare i show()metodi ecc forniti con jquery. Invece devi sovrascrivere il codice ancora più orribile sovrascrivendo il codice hacky.

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

! important è un'opzione di ultima risorsa e in realtà non dovrebbe essere utilizzato in una libreria di base come bootstrap.

— John Magnolia
fonte

4

Funziona, ma proverò la prima risposta e cambierò le classi in .collapse.

.toggleClass('hidden')

— Chloe
fonte