Saya mencari cara untuk mengubah kode jQuery ini (yang digunakan di bagian menu responsif) menjadi JavaScript murni.
Jika sulit untuk diimplementasikan, tidak apa-apa untuk menggunakan framework JavaScript lainnya.
$('.btn-navbar').click(function()
{
$('.container-fluid:first').toggleClass('menu-hidden');
$('#menu').toggleClass('hidden-phone');
if (typeof masonryGallery != 'undefined')
masonryGallery();
});
javascript
dom
toggle
max imax
sumber
sumber
document.getElementById("menu").classList.toggle("hidden-phone")
:-)Jawaban:
Jawaban 2014 :
classList.toggle()
adalah standar dan didukung oleh sebagian besar browser .Browser lama dapat menggunakan penggunaan classlist.js untuk classList.toggle () :
Selain itu, Anda tidak boleh menggunakan ID (ID tersebut membocorkan global ke dalam
window
objek JS ).sumber
Berikut adalah solusi yang diimplementasikan dengan ES6
contoh penggunaan
sumber
Lihat contoh ini: JS Fiddle
sumber
Yang ini juga berfungsi di versi IE sebelumnya.
sumber
\b
batas kata tidak konsisten dengan pemisah nama kelas css. misalnya tidak berfungsi jika nama kelas berisi tanda hubung ("-") char: btn, btn-red keduanya akan cocok'\\b' + 'btn' + '\\b'
!!Ini mungkin lebih ringkas:
sumber
Coba ini (semoga berhasil):
sumber
Berikut adalah kode untuk IE> = 9 dengan menggunakan split ("") pada className:
sumber
Jika Anda ingin mengalihkan kelas menjadi elemen menggunakan solusi asli, Anda dapat mencoba saran ini. Saya telah mencicipinya dalam kasus yang berbeda, dengan atau tanpa kelas lain ke dalam elemen, dan saya pikir itu bekerja cukup banyak:
sumber