使用Javascript动态更改显示属性[关闭]

Question

我想根据 div 标签当前的显示属性更改其显示属性。

当显示=“无”时，应通过单击它切换到“flex”，反之亦然。

我写了以下js代码：

window.onload = function toggleSideMenu() {
    var test = document.getElementById("side-menu");
    
    if (test.style.display === "Flex") {
        test.style.display = "None";
    }
    else {
        test.style.display = "Flex";
    }
}

它应该通过单击 DOM 中的 span 元素来激活。

<span id="toggle-button" onclick="toggleSideMenu()">Toggle</span>

<div id="side-menu">
    <p>Hello world</p>
</div>

但是，它不起作用。

有人能看到我的错误吗？

Answer 1

虽然设置

style.display

可以通过不区分大小写的方式完成（例如“Flex”或“flex”或“FLEX”），但当读取该样式属性时，它将全部小写，因此“flex”。这意味着你的

if

条件永远不会成立。你必须与小写的“flex”进行比较。

Answer 2

您创建的函数仅在加载时执行一次。
如果您想在页面加载结束并单击时使用它，请先声明它并像您所做的那样使用它。如果您不需要在加载时执行一次代码，请不要使用 `window.onload' 行。
此外，显示属性均为小写。

const showHideSideMenuMyFolders = () => {
      var test = document.getElementById("sideMenuLowerPartFolders_MyFolders");

      if (test.style.display === "flex") {
          test.style.display = "none";
      }
      else {
          test.style.display = "flex";
      }
}

window.onload = showHideSideMenuMyFolders();

Answer 3

您正在将函数附加到“window.onload”，尝试仅创建一个普通函数而不将其附加到“window.onload”

为了避免使用“window.onload”，可以在页脚插入JS，推荐这样做。

<aside id="sideMenuLowerPartFolders_MyFolders" style="display:none;">Side Menu</aside>
<span id="showSideMenuMyFolders" onclick="showHideSideMenuMyFolders()" style="cursor:pointer">open menu</span>
<script>
  function showHideSideMenuMyFolders() {
    let test = document.getElementById("sideMenuLowerPartFolders_MyFolders");

    if (test.style.display === "flex") {
      test.style.display = "none";
    } else {
      test.style.display = "flex";
    }
  };
</script>