我必须只在jQuery中使用toggle类方法吗?还是可以在普通的javaScript中使用它

Question

我有一个多节登录页项目，我想在特定的媒体查询中添加hambuger的图标。当我点击它时，它会在一个块中显示导航栏元素，当我再次点击它时它会消失>gt>我的问题是，当我使用toggle类方法时，它不会切换类，即使我在控制台中测试它，它也不起作用

#我的代码#

function myfunction() {
  const lis = document.querySelectorAll("li");
  const ul = document.querySelector("ul");
  const icon=document.querySelector("fa fa-bars"); 
  icon.addEventListener("click",()=>{
    lis.classList.toggle("lessSize");
  })
  
}

**注意：我不想在这个iwant中使用库jQuery来使它没有它**

Answer 1

classList.toggle()将正常工作。您的代码不起作用有两个原因。

首先，fa fa-bars不是一个有效的选择器。我想你的意思是用document.querySelector('.fa.fa-bars')代替。

其次，querySelectorAll()返回NodeList，而不是单个元素。因此，您需要循环遍历它们，并对每个单独的元素调用classList.toggle()。

做出这些更改后，正确的代码应该如下所示：

function myfunction() {
  const lis = document.querySelectorAll("li");
  const ul = document.querySelector("ul");
  const icon = document.querySelector(".fa.fa-bars");
  
  icon.addEventListener("click", () => {
    lis.forEach(li => li.classList.toggle('lessSize'));
  })
}

请注意，本示例假设使用querySelector()来检索.fa-bars元素是正确的，并且DOM中只有其中的1个元素。如果有多个，那么你也需要另一个循环。

Answer 2

除了注释中的答案外，这将不起作用，因为您使用瞄准了许多列表项

const lis = document.querySelectorAll("li");

所以这个类将只在找到的第一个列表项上切换，你应该像这样循环它们：

lis.forEeach(li => {
   li.classList.toggle("lessSize")
})