如何做Javascript函数来改变元素的样式显示

Question

function burgerMenu(){
//alert(document.getElementById("hiddenMenuUL").style.display);
if(document.getElementById("hiddenMenuUL").style.display="none"){
document.getElementById("hiddenMenuUL").style.display="block";
}
else if(document.getElementById("hiddenMenuUL").style.display="block"){
document.getElementById("hiddenMenuUL").style.display="none";
}
}

我想切换汉堡菜单图标。因此，如果我按下图标，burgerMenu((函数将切换并验证其display:none是否更改为display:block，反之亦然。hiddenMenuUL是用于链接列表的。下面这一行是HTML:中的按钮行

<button class="btn" onclick="burgerMenu()">&#9776;</button>

我的隐藏菜单 CSS

#hiddenMenuUL{
display: none;
list-style: none;
width: 100%;
justify-content: center;
}

Answer 1

在编写if时，实际上并没有检查display=="none"，而是试图将其设置为none。

你应该做的是这样的：

function burgerMenu(){
let menuStyle = document.getElementById("hiddenMenuUL").style.display;
if(menuStyle === 'none'){
document.getElementById("hiddenMenuUL").style.display="block";
}
else {
document.getElementById("hiddenMenuUL").style.display="none";
}
}

编辑：

显示规则似乎是在CSS中定义的，并且不是内联的。

.style只能到达内联样式，例如：

<div id="hiddenMenuUL" style="display: none;"></div>

像上面的例子一样在内联中添加"display:none"应该是在特定场景中"修复"它的最快、最简单的方法，尽管这可能不会被认为是最佳实践。