如果语句不适用于 document.querySelector

Question

我基本上正在使用汉堡菜单。 在这个阶段，我做了一个菜单，当它被点击时，会出现一个十字而不是它。 这一切都运作良好。

 function drop(){ let bars = document.querySelector("div.bar"); let cross = document.querySelector("div.cross"); bars.style.display = "none"; cross.style.display = "flex"; }

 div.bar { display: flex; transition: 1s; cursor: pointer; justify-content: space-between; flex-direction: column; height: 30px; color: gray; }.ibar { display: inline-flex; width: 40px; height: 5px; background-color: black; border-radius: 31%; }.cross{ display: none; justify-content: center; align-items: center; width: fit-content; font-size: 70px; color: gray; }

 <div class="bar" id="bar" onclick="drop()"> <div class="ibar"></div> <div class="ibar"></div> <div class="ibar"></div> </div> <div class="cross" id="hiddenCross">&times;</div>

但我面临的主要问题如下：

在我的 function 中，当我添加这样的 if 语句时：

if (cross.style.display === "none"){
    bars.style.display = "none";
    cross.style.display = "flex";
}

那么if块内的两行代码（正在更改显示属性）不起作用。

我首先认为这是document.querySelector的某种属性，它限制了这种行为。 但是当我使用 id 执行相同的 function 时，同样的问题仍然存在。

Answer 1

元素的样式属性只检查内联 styles。 改用getComputedStyle以便找到所有 CSS 规则。

 function drop(){ let bars = document.querySelector("div.bar"); let cross = document.querySelector("div.cross"); if (window.getComputedStyle(cross).display === "none"){ bars.style.display = "none"; cross.style.display = "flex"; } }

 div.bar { display: flex; transition: 1s; cursor: pointer; justify-content: space-between; flex-direction: column; height: 30px; color: gray; }.ibar { display: inline-flex; width: 40px; height: 5px; background-color: black; border-radius: 31%; }.cross{ display: none; justify-content: center; align-items: center; width: fit-content; font-size: 70px; color: gray; }

 <div class="bar" id="bar" onclick="drop()"> <div class="ibar"></div> <div class="ibar"></div> <div class="ibar"></div> </div> <div class="cross" id="hiddenCross">&times;</div>

Answer 2

每次单击汉堡包时，drop() function 都会触发，并且在此 function 中，您将“cross”元素的 style.display 属性设置为 flex。 但是 if 语句中的代码只有在“cross”元素的 style.display 属性设置为 none 时才会执行，但它永远不会发生。 您可以使用任何额外的 class，例如，“隐藏”并在每次单击菜单时切换它：当栏有 class“隐藏”时 - 交叉应该有这个 class，反之亦然。 并且在 css 文件 class 中“隐藏”应该有 display: none 属性。