如何在纯 JavaScript 中切换元素的类? [英] How do I toggle an element's class in pure JavaScript?

问题描述

我正在寻找一种方法来将此 jQuery 代码(用于响应式菜单部分)转换为纯 JavaScript.

I'm looking for a way to convert this jQuery code (which is used in responsive menu section) to pure JavaScript.

如果很难实现，可以使用其他 JavaScript 框架.

If it's hard to implement it's OK to use other JavaScript frameworks.

$('.btn-navbar').click(function()
{
    $('.container-fluid:first').toggleClass('menu-hidden');
    $('#menu').toggleClass('hidden-phone');

    if (typeof masonryGallery != 'undefined') 
        masonryGallery();
});

推荐答案

2014 答案:classList.toggle() 是大多数浏览器都支持的标准.

2014 answer: classList.toggle() is the standard and supported by most browsers.

旧浏览器可以使用使用 classlist.js for classList.toggle():

var menu = document.querySelector('.menu') // Using a class instead, see note below.
menu.classList.toggle('hidden-phone');

顺便说一句，您不应该使用 ID(它们会泄漏全局变量到 JS window 对象).

As an aside, you shouldn't be using IDs (they leak globals into the JS window object).

这篇关于如何在纯 JavaScript 中切换元素的类?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！