Szukam sposobu na przekonwertowanie tego kodu jQuery (który jest używany w responsywnej sekcji menu) na czysty JavaScript.
Jeśli trudno jest zaimplementować, możesz użyć innych frameworków JavaScript.
$('.btn-navbar').click(function()
{
$('.container-fluid:first').toggleClass('menu-hidden');
$('#menu').toggleClass('hidden-phone');
if (typeof masonryGallery != 'undefined')
masonryGallery();
});
javascript
dom
toggle
max imax
źródło
źródło
document.getElementById("menu").classList.toggle("hidden-phone")
:-)Odpowiedzi:
Odpowiedź 2014 :
classList.toggle()
jest standardem i obsługiwana przez większość przeglądarek .Starsze przeglądarki mogą używać classlist.js dla classList.toggle () :
Na marginesie, nie powinieneś używać identyfikatorów ( przeciekają one wartości globalne do
window
obiektu JS ).źródło
Oto rozwiązanie zaimplementowane w ES6
przykład użycia
źródło
Spójrz na ten przykład: JS Fiddle
źródło
Ten działa również we wcześniejszych wersjach IE.
źródło
\b
granica słowa nie jest zgodna z separatorami nazw klas CSS. na przykład nie działa, jeśli nazwa klasy zawiera myślnik („-”) znak: btn, btn-red będą pasować zarówno'\\b' + 'btn' + '\\b'
!To jest być może bardziej zwięzłe:
źródło
Spróbuj tego (miejmy nadzieję, że zadziała):
źródło
Oto kod dla IE> = 9 przy użyciu split („”) w className:
źródło
Jeśli chcesz przełączyć klasę na element za pomocą rozwiązania natywnego, możesz wypróbować tę sugestię. Próbowałem go w różnych przypadkach, z innymi klasami na elemencie lub bez, i myślę, że działa prawie:
źródło