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?

Usuń hiddenklasę z elementu
Zmień właściwość widoczności
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.

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