Javascript 在按钮单击时切换显示在第一次单击时起作用，但不会使显示再次隐藏

我有一个div，我想在单击按钮之前一直隐藏，当再次单击按钮后，再次隐藏该div。当我第一次单击它以显示div时，它可以工作，但显示不会再次隐藏。我知道这个按钮不止一次工作，因为我的console.log（“hi”）每次点击都会登录

let menuBtn=document.querySelector（“菜单按钮”）；
让menuOption=document.querySelector（“.menu options”）；
menuOption.style.display=“无”；
menuBtn.addEventListener（'单击'，（）=>{
控制台日志（“hi”）；
如果（menuOption.style.display=“无”）{
menuOption.style.display=“初始”
}否则{
menuOption.style.display=“无”
}
});
#菜单按钮{
保证金：自动；
背景色：透明；
大纲：无；
边界：无；
}
.菜单选项{
位置：绝对位置；
背景颜色：卡其色；
高度：100px；
宽度：30px；
}

你好


家


关于


文件夹


您需要比较值，但不需要赋值。因此，您应该使用
==
而不是
=

menuBtn.addEventListener('click',() => {
    console.log("hi");
    if (menuOption.style.display === "none") {  //this should use compare
        menuOption.style.display = "initial"
    } else {
        menuOption.style.display = "none"
    }
});

您需要比较值，但不需要赋值。因此，您应该使用
==
而不是
=

menuBtn.addEventListener('click',() => {
    console.log("hi");
    if (menuOption.style.display === "none") {  //this should use compare
        menuOption.style.display = "initial"
    } else {
        menuOption.style.display = "none"
    }
});

在我看来，最好的方法是使用一个隐藏div的类

然后使用JS从元素中添加或删除该类以隐藏它们或使它们显示。您可以使用下面的语法来实现它

//从DOM获取元素
常量元素=document.getElementById（“”）；
//添加名为'hide'的类`
元素。类列表。添加（“隐藏”）；
//删除'hide'类
元素。类列表。删除（“隐藏”）；
/* 
切换类“隐藏”。这意味着它要么将
如果元素已经具有该类，或者添加该类
没有
*/
元素.classList.toggle（“隐藏”）；


const btn=document.getElementById（“btn”）；
const square=document.getElementById（“square”）；
btn.addEventListener（“单击”，（）=>square.classList.toggle（“隐藏”）
div{
宽度：200px；
高度：200px；
背景色：红色；
}
.隐藏{
显示：无
}
点击我！
在我看来，最好的方法是使用一个隐藏div的类

然后使用JS从元素中添加或删除该类以隐藏它们或使它们显示。您可以使用下面的语法来实现它

//从DOM获取元素
常量元素=document.getElementById（“”）；
//添加名为'hide'的类`
元素。类列表。添加（“隐藏”）；
//删除'hide'类
元素。类列表。删除（“隐藏”）；
/* 
切换类“隐藏”。这意味着它要么将
如果元素已经具有该类，或者添加该类
没有
*/
元素.classList.toggle（“隐藏”）；


const btn=document.getElementById（“btn”）；
const square=document.getElementById（“square”）；
btn.addEventListener（“单击”，（）=>square.classList.toggle（“隐藏”）
div{
宽度：200px；
高度：200px；
背景色：红色；
}
.隐藏{
显示：无
}
点击我！
正确的方法是：


const menuBtn=document.querySelector（“菜单按钮”）
menuBtn.addEventListener（'click'，（）=>menuBtn.classList.toggle（'noMenu'））
#菜单按钮{
保证金：自动；
背景色：透明；
大纲：无；
边界：无；
}
#menu-button.noMenu>div.menu-options{
显示：无；
}
.菜单选项{
位置：绝对位置；
背景颜色：卡其色；
高度：100px；
宽度：30px；
}

你好

家
关于
投资组合

正确的方法是：


const menuBtn=document.querySelector（“菜单按钮”）
menuBtn.addEventListener（'click'，（）=>menuBtn.classList.toggle（'noMenu'））
#菜单按钮{
保证金：自动；
背景色：透明；
大纲：无；
边界：无；
}
#menu-button.noMenu>div.menu-options{
显示：无；
}
.菜单选项{
位置：绝对位置；
背景颜色：卡其色；
高度：100px；
宽度：30px；
}

你好

家
关于
投资组合