Javascript 使用addEventlistener只需单击两次按钮即可工作

我一直在想办法让我的菜单按钮只需点击一次就可以使用，但它只在你点击两次时才起作用。该按钮使菜单的不透明度从0变为1，因此它将在右上角缓慢弹出。有谁能给我提供解决这个问题的方法吗。我知道在菜单栏重新出现之前，先调用了一些东西，但不确定是哪一个，我尝试了其他几种选择

功能切换菜单（）{
var x=document.getElementById（“navi”）；
如果（x.style.opacity==“0”）{
x、 style.opacity=“1”；
x、 添加（“导航”）；
}否则{
x、 style.opacity=“0”；
}
};
window.onload=函数（）{
var click=document.getElementById（“菜单切换”）
单击.addEventListener（“单击”，切换菜单）；
};
*{
保证金：0；
填充：0；
}
html，
身体{
保证金：0；
填充：0；
溢出x：隐藏；
身高：100%；
}
/*第一菜单*/
#纳维{
不透明度：0；
文本对齐：居中；
高度：40px；
宽度：-50%；
z指数：1；
过渡：所有3s轻松；
}
#李纳维{
浮动：对；
显示：内联；
颜色：白色；
利润率：20px；
填充：15px；
宽度：100px；
背景色：rgba（194147129.7）；
字体系列：“CAB”，无衬线；
光标：指针；
}
#导航{
不透明度：1；
高度：40px；
}
/*第二菜单*/
#头衔{
填充顶部：50px；
位置：相对位置；
}
#标题李{
显示：内联块；
颜色：红色；
利润率：50像素；
}
#标题li按钮{
填充：10px；
宽度：100px；
边框：2px实心#F5ECE1；
背景色：#C29381；
颜色：白色；
光标：指针；
字体系列：“CAB”，无衬线；
}
#标题li按钮：悬停，
#李导航：悬停{
背景色：rgba（166,99,72,7）；
}
#演示{
文本对齐：居中；
字体大小：60px；
填充底部：50px；
}
.视差{
背景图片：url（img/beans.jpg）；
宽度：100%；
最小高度：100%；
}
.视差{
背景尺寸：封面；
背景重复：无重复；
背景位置：中心；
位置：相对位置；
z指数：0；
}
.文本框{
位置：绝对位置；
最高：50%；
宽度：100%；
文本对齐：居中；
字体大小：30px；
颜色：白色；
字体系列：“CAB”，无衬线；
}
.文本框h1{
位置：绝对位置；
底部：150%；
文本对齐：居中；
宽度：100%；
字体大小：300%；
}
.textBox.border{
背景色：#C86428；
颜色：#fff；
填充：20px；
}
.textBox.border.trans{
背景色：透明；
字体大小：40px；
}
.联系人图标{
宽度：5%；
不透明度：0；
过渡：所有3s轻松；
}
.联系人图标img{
宽度：4%；
利润率：10px；
}
.contact-icon.i切换{
不透明度：1；
宽度：100%；
}


配方
实验
关于

Mad Monks酿酒公司

马上就来


菜单

接触


问题在于，在页面加载时，所讨论的元素没有
不透明度
属性；它不是0或1，它是空的（空字符串）。通过将其转换为真实性测试来修复它，该测试将适用于空白值和
“0”
：

像


功能切换菜单（）{
var x=document.getElementById（“navi”）；
如果（！x.style.opacity）{
x、 style.opacity=“1”；
x、 添加（“导航”）；
}否则{
x、 style.opacity=“0”；
}
}
window.onload=函数（）{
var click=document.getElementById（“菜单切换”）
单击.addEventListener（“单击”，切换菜单）；
};
*{
保证金：0；
填充：0；
}
html，
身体{
保证金：0；
填充：0；
溢出x：隐藏；
身高：100%；
}
/*第一菜单*/
#纳维{
不透明度：0；
文本对齐：居中；
高度：40px；
宽度：-50%；
z指数：1；
过渡：所有3s轻松；
}
#李纳维{
浮动：对；
显示：内联；
颜色：白色；
利润率：20px；
填充：15px；
宽度：100px；
背景色：rgba（194147129.7）；
字体系列：“CAB”，无衬线；
光标：指针；
}
#导航{
不透明度：1；
高度：40px；
}
/*第二菜单*/
#头衔{
填充顶部：50px；
位置：相对位置；
}
#标题李{
显示：内联块；
颜色：红色；
利润率：50像素；
}
#标题li按钮{
填充：10px；
宽度：100px；
边框：2px实心#F5ECE1；
背景色：#C29381；
颜色：白色；
光标：指针；
字体系列：“CAB”，无衬线；
}
#标题li按钮：悬停，
#李导航：悬停{
背景色：rgba（166,99,72,7）；
}
#演示{
文本对齐：居中；
字体大小：60px；
填充底部：50px；
}
.视差{
背景图片：url（img/beans.jpg）；
宽度：100%；
最小高度：100%；
}
.视差{
背景尺寸：封面；
背景重复：无重复；
背景位置：中心；
位置：相对位置；
z指数：0；
}
.文本框{
位置：绝对位置；
最高：50%；
宽度：100%；
文本对齐：居中；
字体大小：30px；
颜色：白色；
字体系列：“CAB”，无衬线；
}
.文本框h1{
位置：绝对位置；
底部：150%；
文本对齐：居中；
宽度：100%；
字体大小：300%；
}
.textBox.border{
背景色：#C86428；
颜色：#fff；
填充：20px；
}
.textBox.border.trans{
背景色：透明；
字体大小：40px；
}
.联系人图标{
宽度：5%；
不透明度：0；
过渡：所有3s轻松；
}
.联系人图标img{
宽度：4%；
利润率：10px；
}
.contact-icon.i切换{
不透明度：1；
宽度：100%；
}


配方
实验
关于

Mad Monks酿酒公司

马上就来


菜单

接触



if (!x.style.opacity) {