jQuery & CSS - Hapus / Tambahkan display: tidak ada

Saya memiliki div dengan kelas ini:

.news{
  width:710px; 
  float:left;
  border-bottom:1px #000000 solid;
  font-weight:bold;
  display:none;
}

Dan saya ingin dengan beberapa metode jQuery menghapus display itu: none; (sehingga div akan ditampilkan) dan kemudian menambahkannya lagi (sehingga div akan membayangi).

Bagaimana saya bisa melakukannya? Bersulang

Untuk menyembunyikan div

$('.news').hide();

atau

$('.news').css('display','none');

dan untuk menunjukkan div:

$('.news').show();

atau

$('.news').css('display','block');

jQuery memberi Anda:

$(".news").hide();
$(".news").show();

Anda kemudian dapat dengan mudah menampilkan dan menyembunyikan elemen.

Jadi, izinkan saya memberi Anda kode sampel:

<div class="news">
Blah, blah, blah. I'm hidden.
</div>

<a class="trigger">Hide/Show News</a>

Tautan akan menjadi pemicu untuk menampilkan div saat diklik. Jadi Javascript Anda akan menjadi:

$('.trigger').click(function() {
   $('.news').toggle();
});

Anda hampir selalu lebih baik membiarkan jQuery menangani gaya untuk menyembunyikan dan menampilkan elemen.

Sunting: Saya melihat orang-orang di atas merekomendasikan penggunaan .showdan .hideuntuk ini. .togglememungkinkan Anda melakukan keduanya hanya dengan satu efek. Jadi itu keren.

Dalam JavaScript:

getElementById("id").style.display = null;

Di jQuery:

$("#id").css("display","");

Gunakan sakelar untuk menampilkan dan menyembunyikan.

$('#mydiv').toggle()

Lihat contoh yang berfungsi di http://jsfiddle.net/jNqTa/

saya sarankan menambahkan kelas untuk menampilkan / menyembunyikan elemen:

.hide { display:none; }

dan kemudian gunakan jquery's .toggleClass () untuk menampilkan / menyembunyikan elemen:

$(".news").toggleClass("hide");

Satu-satunya cara untuk menghapus inline "display: none" melalui css-api jQuery adalah dengan menyetel ulang dengan string kosong ( nullTIDAK berfungsi btw !!).

Menurut dokumen jQuery ini adalah cara umum untuk "menghapus" satu set properti gaya sebaris.

$("#mydiv").css("display","");

atau

$("#mydiv").css({display:""});

harus melakukan trik dengan benar.

IMHO ada metode yang hilang di jQuery yang bisa disebut "unhide" atau "mengungkapkan" yang alih-alih hanya mengatur properti gaya inline lain membatalkan nilai tampilan dengan benar seperti dijelaskan di atas. Atau mungkin hide()harus menyimpan nilai inline awal dan show()harus mengembalikan ...

Fungsi .show () dan .hide () jQuery mungkin adalah pilihan terbaik Anda.

Anda tidak memberi kami banyak informasi tetapi secara umum ini mungkin solusi:

$("div.news").css("display", "block");

Untuk beberapa alasan, toggle tidak berfungsi untuk saya, dan saya menerima kesalahan uncaught type error toggle is not a functionsaat memeriksa elemen di browser. Jadi saya menggunakan kode berikut dan itu mulai bekerja untuk saya.

$(".trigger").click(function () {
    $('.news').attr('style', 'display:none');
})

File script jquery bekas jquery-2.1.3.min.js.

Jika Anda memiliki banyak elemen yang Anda ingin .hide()atau .show(), Anda akan membuang banyak sumber daya untuk melakukan apa yang Anda inginkan - bahkan jika menggunakan .hide(0)atau .show(0)- parameter 0 adalah durasi animasi.

Berbeda dengan Prototype.js .hide() dan .show()metode yang hanya digunakan untuk memanipulasi atribut tampilan elemen, implementasi jQuery lebih kompleks dan tidak disarankan untuk sejumlah besar elemen.

Dalam kasus ini Anda mungkin harus mencoba .css('display','none')untuk menyembunyikan dan .css('display','')menunjukkan

.css('display','block') harus dihindari, terutama jika Anda bekerja dengan elemen sebaris, baris tabel (sebenarnya elemen tabel apa pun), dll.

Mempertimbangkan komentar lolesque untuk jawaban terbaik, Anda dapat menambahkan atribut atau kelas untuk menampilkan / menyembunyikan elemen dengan properti tampilan yang berbeda dari biasanya, jika situs Anda memerlukan kompatibilitas mundur, saya sarankan membuat kelas dan menambahkan / menghapusnya untuk ditampilkan / tampilkan elemennya

.news-show {
display:inline-block;
}

.news-hide {
display:none;
}

Ganti blok-sebaris dengan metode tampilan pilihan Anda dan gunakan jquerys addclass https://api.jquery.com/addclass/ dan hapus kelas https://api.jquery.com/removeclass/ daripada tampilkan / sembunyikan, jika mundur kompatibilitas tidak masalah, Anda dapat menggunakan atribut seperti ini.

.news[data-news-visible=show] {
display:inline-block;
}

.news[data-news-visible=hide] {
display:none;
}

Dan gunakan jquerys attr () http://api.jquery.com/attr/ untuk menampilkan dan menyembunyikan elemen.

Metode apa pun yang Anda sukai membuat Anda dapat dengan mudah mengimplementasikan animasi css3 saat menampilkan / menyembunyikan elemen dengan cara ini

Menggunakan show()penambahan display:blocksebagai penggantidisplay:hide yang mungkin merusak barang.

Untuk menghindarinya, Anda bisa memiliki kelas dengan properti display:nonedan mengalihkan kelas itu untuk elemen itu dengan toggleClass().

$("button").on('click', function(event){  $("div").toggleClass("hide"); });

.hide{
   display:none;
}

div{
   width:40px;
   height:40px;
   background:#000;
   margin-bottom:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>
<button>Toggle Box</button>

Tidak ada jawaban yang menyebutkan ini.