Javascript 为什么我的显示隐藏按钮需要第一次双击

我的网站上有这个显示/隐藏按钮。它可以工作，但在用户第一次需要双击它时，就好像开关被设置为“隐藏”，但元素已经隐藏

我想编辑我的代码，这样第一次单击按钮就可以显示元素

我不熟悉javascript，所以我不知道如何更改它

多谢各位

函数showhidemenu（）{
var x=document.getElementById（“菜单”）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
}否则{
x、 style.display=“无”；
}
}

#菜单{
背景：rgba（0,0,0,0）；
位置：绝对位置；
z指数：1；
顶部：60px；
右：50px；
宽度：150px；
字体系列：“开放式Sans”，无衬线；
显示：无；
}

这是一个菜单
显示/隐藏

您需要检查“if/then”语句。你检查的顺序不对

函数showhidemenu（）{
var x=document.getElementById（“菜单”）；
如果（x.style.display==“块”）{
x、 style.display=“无”；
}否则{
x、 style.display=“block”；
}
}

#菜单{
背景：rgba（0,0,0,0）；
位置：绝对位置；
z指数：1；
顶部：60px；
右：50px；
宽度：150px；
字体系列：“开放式Sans”，无衬线；
显示：无；
}

这是一个菜单
显示/隐藏

您需要检查“if/then”语句。你检查的顺序不对

函数showhidemenu（）{
var x=document.getElementById（“菜单”）；
如果（x.style.display==“块”）{
x、 style.display=“无”；
}否则{
x、 style.display=“block”；
}
}

#菜单{
背景：rgba（0,0,0,0）；
位置：绝对位置；
z指数：1；
顶部：60px；
右：50px；
宽度：150px；
字体系列：“开放式Sans”，无衬线；
显示：无；
}

这是一个菜单
显示/隐藏

，因为最初的

x.style.display==“none”

是

false

，它会转到

else

块。
为此，可以使用三元运算符

函数showhidemenu（）{
var x=document.getElementById（“菜单”）；
x、 style.display=！x.style.display？'block'：''；
}

#菜单{
背景：rgba（0,0,0,0）；
位置：绝对位置；
z指数：1；
顶部：60px；
右：50px；
宽度：150px；
字体系列：“开放式Sans”，无衬线；
显示：无；
}

这是一个菜单
显示/隐藏

，因为最初的

x.style.display==“none”

是

false

，它会转到

else

块。
为此，可以使用三元运算符

函数showhidemenu（）{
var x=document.getElementById（“菜单”）；
x、 style.display=！x.style.display？'block'：''；
}

#菜单{
背景：rgba（0,0,0,0）；
位置：绝对位置；
z指数：1；
顶部：60px；
右：50px；
宽度：150px；
字体系列：“开放式Sans”，无衬线；
显示：无；
}

这是一个菜单
显示/隐藏

要获得预期的结果，请使用下面的选项，首先检查显示，如果显示不是内联的，则该选项将为空

x.style.display === "none" || x.style.display === ""

有关更多详细信息，请参阅此链接-

函数showhidemenu（）{
var x=document.getElementById（“菜单”）；
如果（x.style.display==“无”| | x.style.display===”）{
x、 style.display=“block”；
}否则{
x、 style.display=“无”；
}
}

#菜单{
背景：rgba（0,0,0,0）；
位置：绝对位置；
z指数：1；
顶部：60px；
右：50px；
宽度：150px；
字体系列：“开放式Sans”，无衬线；
显示：无；
}

这是一个菜单
显示/隐藏

要获得预期的结果，请使用下面的选项，首先检查显示，如果显示不是内联的，则该选项将为空

x.style.display === "none" || x.style.display === ""

有关更多详细信息，请参阅此链接-

函数showhidemenu（）{
var x=document.getElementById（“菜单”）；
如果（x.style.display==“无”| | x.style.display===”）{
x、 style.display=“block”；
}否则{
x、 style.display=“无”；
}
}

#菜单{
背景：rgba（0,0,0,0）；
位置：绝对位置；
z指数：1；
顶部：60px；
右：50px；
宽度：150px；
字体系列：“开放式Sans”，无衬线；
显示：无；
}

这是一个菜单
显示/隐藏

这样的内容是您不应该直接检查CSS属性的原因。使用颜色值更难做到这一点。相反，应该使用CSS类，例如

#menu.hidden{display:none；}

；然后应该进行检查。或者简单地使用。这就是为什么不应该直接检查CSS属性的原因。使用颜色值更难做到这一点。相反，应该使用CSS类，例如

#menu.hidden{display:none；}

；然后应该进行检查。或者简单地使用。