jQuery show () dla klasy css Bootstrap Twittera jest ukryta

89

Używam Twitter Bootstrap i zauważam, że jQuery show()lub fadeIn()nie powoduje hiddenpojawienia się elementu DOM oznaczonego klasą, ponieważ funkcje jQuery tylko usuwają display: nonespecyfikację. Jednak visibilitynadal jest ustawiony na hidden.

Zastanawiam się, jaki jest najlepszy możliwy sposób obejścia tego problemu?

  1. Usuń hiddenklasę z elementu
  2. Zmień właściwość widoczności
  3. Zastąp ukrytą klasę w moim własnym CSS

W szczególności chcę wiedzieć, czy naprawienie tego za pomocą jQuery lub css jest lepsze i dlaczego.

jquery twitter-bootstrap Lim H.
źródło
Generalnie nie używam parametru {visibility: hidden}, ponieważ pozostawia on element w DOM, aby zająć miejsce. Czy jest jakiś powód, dla którego musisz to zrobić?
isherwood
1
@isherwood visibility: hiddenjest responsywny z bootstrap.
Lim H.

Odpowiedzi:

124

Klasa CSS, której szukasz, to .collapse. To ustawia element nadisplay: none;

Więc używanie $('#myelement').show()będzie działać poprawnie.

AKTUALIZACJA: Bootstrap 3.3.6 zaktualizował .collapse z powrotem do:

.collapse {
  display: none;
}
Eoinii
źródło
2
To powinna być akceptowana odpowiedź. Współpracuje także z .slideDown(), .fadeIn()itp .hiddenw Bootstrap jest na rzeczy nigdy nie ma być wyświetlany.
zgryźliwy
Czy to nowość w Bootstrap 3?
Lim H.
Nie - widziałem to w dokumentacji. <div class = "nav-collapse collapse"> Ten wiersz został zaczerpnięty z przykładów w wersji 2.3.2.
Eoinii
33
Niestety, ta odpowiedź nie działa już z Boostrap 3. .collapseteraz również ustawiavisibility: hidden;
Tom17
9
Działa w moim Bootstrap 3?
James McCormack
21

Spowoduje to zanikanie niewidocznego elementu i usunięcie klasy

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

http://jsfiddle.net/7qxVL/

Jeśli naprawdę nie potrzebujesz, aby element był niewidoczny (tj. Zajmował miejsce), możesz przedefiniować .hidden (w swoim lokalnym css, nie zmieniaj źródła bootstrap, a nawet lepiej, w lokalnym pliku LESS).

David Fregoli
źródło
Dzięki pracował dla mnie! Uprościłem się do wykonania :: fadeIn (). RemoveClass ('hidden') - nie ma potrzeby bezpośredniego manipulowania css lub ukrywania.
dbrin
1
Zobacz odpowiedź opublikowaną przez @IrishJoker. Nie powinieneś używać .hiddendla elementów, które chcesz wyświetlić za pomocą javascript. Użyj .collapsezamiast tego.
zgryźliwy
14

Ostrzeżenie:

bootstrap 3.3.0 właśnie zmienił .collapse to:

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

Co jest przełomową zmianą dla jQuery.show (), musiałem wrócić do inliningu:

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

aby kontynuować używanie jQuery w następujący sposób:

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

Jedyną klasą, jaką udało mi się znaleźć w bootstrap 3.3.0, aby zastosować tylko „display: none”, jest

.navbar {
  display: none;
}
Ted Killilea
źródło
1
Nie widzę powodu, dla którego Bootstrap miałby to zrobić. Osobiście zawsze mam inny plik css, używany do `` nadpisywania '' ustawień css - zamieniłbym .collapse, aby mieć tylko ustawienie wyświetlania. W ten sposób możesz iść do przodu bez obawy, że wszystko się zepsuje. Ból w wiadomości :(
Eoinii
Rozwiązaniem w Bootstrap 3.3.x jest użycie metod jQuery zamiast .collapse('hide')i .collapse('show'). Możesz ustawić początkową widoczność bezpośrednio w kodzie HTML za pośrednictwem klasy collapse(do ukrycia) lub collapse in(do pokazania). Zobacz getbootstrap.com/javascript/#collapse .
alexw
Najnowsza wersja 3.3.6
cofnęła
5

Miałem ten sam problem. Użyłem tej poprawki:

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

Wtedy miałem inny problem, ponieważ moja aplikacja generuje nowe elementy i dołącza je / dołącza. W końcu zrobiłem po wygenerowaniu nowego elementu, który robię:

var newEl = ...;
$(newEl).find('.hidden').hide().removeClass('hidden');
guyaloni
źródło
4

Dla mnie to dlatego, że bootstrap używa !importanthacka zarówno do ukrywania, jak i ukrywania klasy.

Nie możesz więc używać show()metod etc dostarczonych z jquery. Zamiast tego musisz nadpisać jeszcze bardziej okropny kod, nadpisując zhackowany kod.

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

! ważne jest opcją ostatniej szansy i naprawdę nie powinno być używane w podstawowej bibliotece, takiej jak bootstrap.

John Magnolia
źródło
4

To działa, ale spróbuję pierwszej odpowiedzi i zmienię klasy na .collapse.

.toggleClass('hidden')
Chloe
źródło