如何使用vanilla JavaScript编写我在JQuery中编写的切换函数？

昨天我试图用JavaScript让这段代码工作几个小时，因为我真的很想尽可能地掌握基本知识，但最终还是放弃了，用JQuery编写了它。我很想知道如何用vanilla JS书写。我只是想用一个按钮来显示一个隐藏的“div”，所以我觉得它应该很简单，我只是忽略了一些东西：

JQuery：

$('document').ready(function() {
    $('.aboutBtn').click(function() {
        $('#more-brian').toggleClass('hide');
    });
})

HTML:

---

我没有在CSS“hide”类中使用这个。但是它在页面加载时显示div，然后用按钮隐藏它，我希望相反的情况发生。

元素有一个名为

classList

的属性，您可以对它运行一些操作

function toggle(id, className){
  document.getElementById(id).classList.toggle(className);
}

看一看

---

让我知道这是否有帮助。

如果我正确理解了您的问题，您希望在活动类和非活动类之间切换，例如添加/删除它，例如用于菜单。因此，当您单击图元A以显示图元B，然后再次单击图元A以隐藏图元B时，您可以这样做：

function toggle(id){
    var div1 = document.getElementById(id);
    if (div1.style.display == 'none') {
        div1.style.display = 'block'
    } else {
        div1.style.display = 'none'
    }
}

const elementClicked = document.querySelector("#elementClicked");
const elementYouWantToShow = document.querySelector("#elementYouWantToShow");

elementClicked.addEventListener("click", ()=>{
  elementYouWantToShow.classList.toggle("theClassYouWantToToggleBetween");
});

希望这能把事情弄清楚：）

document.addEventListener（'DOMContentLoaded'，（）=>{
const button=document.querySelector（'.button'）；
const-elementToToggle=document.getElementById（'element'）；
button.addEventListener（'mousedown'，（）=>{
elementToToggle.classList.toggle（'hide'）；
});
});
#元素{
高度：100px；
宽度：200px；
边缘顶部：15px；
背景：ddd；
}
#元素隐藏{
显示：无；
}
切换
我相信您正在寻找的属性是“className”。试试这个：

function toggle(id){
   var x = document.getElementById(id);
   if(x.className == "hide") x.className = "show";
   else x.className = "hide";
}

然后，它在CSS中定义了这两个类的可见性方面。
将实现这一点

<div id="more-brian" hidden>
<p id="brian-para">Brian is a husband and father who is very passionate [...]</p>
</div>

div1.classList.toggle（'hide'）hide
类编写代码>。这非常有效！非常感谢。我知道这一定是我忽略的非常简单的事情！很高兴我能帮忙：）
<div id="more-brian" hidden>
<p id="brian-para">Brian is a husband and father who is very passionate [...]</p>
</div>

function toggle(id) {
    var div1 = document.getElementById(id);
    if(div1.hidden) {
        div1.hidden = false;
    } else {
        div1.hidden = true;
    }
}