jQuery到纯JavaScript

Question

我试图制作一个切换菜单，并在Codepen上找到了这个示例（https://codemyui.com/responsive-sidebar-menu/）。我想将Jquery代码变成纯Javascript，但是显然我写的东西有问题。

这就是我写的（我为main设置了id，并在汉堡菜单上添加了Onclick函数，这是与原始菜单仅有的两个区别）：

    function toggle(){
        var main = document.getElementById("mymain");
        var button = document.querySelectorAll(".button");
        var sidebarItem = document.querySelectorAll(".sidebar-item");

        main.classList.toggle("move-to-left");
        button.classList.toggle("active");
        sidebarItem.classList.toggle("active");

        for(let i = 0; i < sidebarItem.length; i++){
            sidebarItem[i].classList.toggle("active");
        }
    }

Answer 1

首先，querySelectorAll为您提供一个节点列表，而不是节点元素，因此，如果要使用classList，则需要遍历节点列表。试试这个：

var button = [...document.querySelectorAll(".button")]
button.map( el => el.classList.toggle("active") )

我将节点列表散布到一个数组中，然后可以使用map方法

将此内容应用于所有querySelectorAll元素