jQuery show () untuk kelas css Bootstrap Twitter tersembunyi

89

Saya menggunakan Twitter Bootstrap dan saya perhatikan bahwa jQuery show()atau fadeIn()tidak membuat elemen DOM yang ditandai dengan kelas hiddenmuncul karena fungsi jQuery hanya menghapus display: nonespesifikasinya. Namun, visibilitymasih disetel ke hidden.

Saya bertanya-tanya apa cara terbaik untuk mengatasi ini?

  1. Hapus hiddenkelas pada elemen tersebut
  2. Ubah properti visibilitas
  3. Timpa kelas tersembunyi di css saya sendiri

Secara khusus, saya ingin tahu apakah memperbaiki ini dengan jQuery atau css lebih baik dan mengapa.

jquery twitter-bootstrap Lim H.
sumber
Saya biasanya tidak menggunakan {visibility: hidden} karena ia membiarkan elemen di DOM menggunakan ruang. Adakah alasan Anda perlu melakukannya?
kayu isherwood
1
@isherwood The visibility: hiddenadalah dari bootstrap responsif.
Lim H.

Jawaban:

124

Kelas css yang Anda cari adalah .collapse. Ini mengatur elemen kedisplay: none;

Jadi penggunaan $('#myelement').show()akan bekerja dengan baik.

UPDATE: Bootstrap v3.3.6 telah memperbarui .collapse kembali ke:

.collapse {
  display: none;
}
Eoinii
sumber
2
Ini harus menjadi jawaban yang diterima. Ia juga bekerja dengan .slideDown(),, .fadeIn()dll. .hiddenDi Bootstrap adalah untuk hal-hal yang tidak ingin Anda tampilkan.
sombong
Apakah ini baru di bootstrap 3?
Lim H.
Tidak - Saya pernah melihatnya digunakan dalam dokumentasi. <div class = "nav-collapse collapse"> Baris ini diambil dari contoh v2.3.2.
Eoinii
33
Sayangnya, jawaban ini tidak lagi berfungsi dengan Boostrap 3. .collapsesekarang juga ditetapkanvisibility: hidden;
Tom17
9
Bekerja di Bootstrap 3 saya?
James McCormack
21

Ini akan memudarkan elemen tak terlihat Anda dan menghapus kelas

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

http://jsfiddle.net/7qxVL/

Jika Anda tidak benar-benar membutuhkan elemen untuk menjadi tidak terlihat (yaitu mengambil ruang), Anda mungkin ingin mendefinisikan ulang .hidden (di css lokal Anda, jangan ubah sumber bootstrap, atau bahkan lebih baik, di file LESS lokal Anda).

David Fregoli
sumber
Terima kasih berhasil untuk saya! Saya menyederhanakan untuk hanya melakukan :: fadeIn (). RemoveClass ('hidden') - tidak perlu memanipulasi css secara langsung atau menyembunyikan.
dbrin
1
Lihat jawaban yang diposting oleh @IrishJoker. Anda tidak boleh menggunakan .hiddenuntuk elemen yang ingin Anda tampilkan menggunakan javascript. Gunakan .collapsesebagai gantinya.
sombong
14

Peringatan:

bootstrap 3.3.0 baru saja mengubah .collapse menjadi:

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

Yang merupakan perubahan besar untuk jQuery.show (), saya harus kembali ke sebaris:

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

untuk terus menggunakan jQuery sebagai berikut:

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

Satu-satunya kelas yang bisa saya temukan di bootstrap 3.3.0 untuk menerapkan hanya 'display: none' is

.navbar {
  display: none;
}
Ted Killilea
sumber
1
Saya tidak dapat melihat alasan yang tepat untuk Bootstrap melakukan ini. Saya pribadi selalu memiliki file css lain, digunakan untuk 'menimpa' pengaturan css - saya akan mengganti .collapse untuk hanya memiliki pengaturan tampilan. Dengan cara ini, Anda dapat terus maju tanpa khawatir segala sesuatunya rusak. Rasa sakit dalam pesan :(
Eoinii
Solusi di Bootstrap 3.3.x adalah dengan menggunakan .collapse('hide')dan .collapse('show')bukan metode jQuery. Anda dapat mengatur visibilitas awal langsung di HTML melalui kelas collapse(menyembunyikan) atau collapse in(menampilkan). Lihat getbootstrap.com/javascript/#collapse .
alexw
Versi terbaru 3.3.6 telah mengembalikan perubahan ini
Eoinii
5

Saya memiliki masalah yang sama. Saya menggunakan tambalan ini:

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

Kemudian saya mengalami masalah lain, karena aplikasi saya menghasilkan elemen baru dan menambahkan / menambahkannya. Apa yang akhirnya saya lakukan adalah setelah membuat elemen baru yang saya lakukan:

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

Bagi saya itu karena bootstrap menggunakan !importanthack untuk menyembunyikan dan menyembunyikan kelas.

Jadi Anda tidak bisa menggunakan show()metode dll yang disediakan dengan jquery. Sebaliknya Anda harus menimpa kode yang lebih mengerikan yang menimpa kode hacky.

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

! important adalah pilihan terakhir dan tidak boleh digunakan di pustaka inti seperti bootstrap.

John Magnolia
sumber
4

Ini berhasil, tetapi saya akan mencoba jawaban pertama dan mengubah kelas menjadi .collapse.

.toggleClass('hidden')
Chloe
sumber