Ich suche nach einer Möglichkeit, diesen jQuery-Code (der im Abschnitt "Responsive Menu" verwendet wird) in reines JavaScript zu konvertieren.
Wenn die Implementierung schwierig ist, können andere JavaScript-Frameworks verwendet werden.
$('.btn-navbar').click(function()
{
$('.container-fluid:first').toggleClass('menu-hidden');
$('#menu').toggleClass('hidden-phone');
if (typeof masonryGallery != 'undefined')
masonryGallery();
});
javascript
dom
toggle
max imax
quelle
quelle
document.getElementById("menu").classList.toggle("hidden-phone")
:-)Antworten:
Antwort 2014 :
classList.toggle()
ist der Standard und wird von den meisten Browsern unterstützt .Ältere Browser können classlist.js für classList.toggle () verwenden :
Abgesehen davon sollten Sie keine IDs verwenden ( sie lecken Globals in das JS-
window
Objekt ).quelle
Hier ist die mit ES6 implementierte Lösung
Anwendungsbeispiel
quelle
Schauen Sie sich dieses Beispiel an: JS Fiddle
quelle
Dieser funktioniert auch in früheren Versionen von IE.
quelle
\b
Die Wortgrenze stimmt nicht mit den Trennzeichen für CSS-Klassennamen überein. Zum Beispiel funktioniert es nicht, wenn der Klassenname einen Bindestrich ("-") enthält. char: btn, btn-red stimmen beide überein'\\b' + 'btn' + '\\b'
!!Das ist vielleicht prägnanter:
quelle
Versuchen Sie dies (hoffentlich wird es funktionieren):
quelle
Hier ist ein Code für IE> = 9 unter Verwendung von split ("") für den Klassennamen:
quelle
Wenn Sie eine Klasse mit einer nativen Lösung auf ein Element umschalten möchten, können Sie diesen Vorschlag ausprobieren. Ich habe es in verschiedenen Fällen mit oder ohne andere Klassen auf dem Element probiert, und ich denke, es funktioniert ziemlich gut:
quelle