javascript - 将 div 设置回显示时出现问题 :none after setting it to block

Question

我正在尝试学习如何使用 JavaScript 操作 DOM，我在 codecademy 学习了一些绝对基础知识，但与 DOM 无关。这是我的第一次尝试，我在代码中所做的注释可能看起来有点业余，但它们是用我自己的话来帮助我理解发生了什么。

问题:

我试图让一个按钮通过它的 id 显示/隐藏另一个 div。我能够让它从 display:none 变为 display:block 但后来我希望能够再次单击该按钮并隐藏菜单，所以我尝试添加 if/else 语句，但经过几次几乎随机的尝试后，我陷入困境。

我在 Google 上搜索了解决方案，但我找到的代码都不像我的，我希望有人能指出我的代码需要做什么，这样我就可以从头到尾进行操作。

if (menu === style.display = 'none') 只是我在尝试了一些不起作用的方法后的一厢情愿。

我知道它可以在 jQuery 中完成，但对我来说，现在这不相关，因为我需要能够掌握一些基本的 JavaScript 才能取得进展。

这是我的 Fiddle

我的JS

//Make Button show/hide div when clicked
function hideShow() {
  //Specify the id I want to add the event to, here it is menubutton and I have added click and told it to look for the function menutoggle
  document.getElementById('menubutton').addEventListener("click", menutoggle, false)
    //Now for the function called menutoggle which will set the id menu to 'block' if it is currently 'none' and to 'none' if it is currently 'block'
  function menutoggle() {
    if (menu === style.display = 'none') {
      document.getElementById('menu').style.display = 'block';
    } else {
      document.getElementById('menu').style.display = 'none';
    };
  }
};
window.onload = hideShow;

Answer 1

Element.style.display 读取内联样式..使用 getComputedStyle读取 css 属性(样式表或内联 CSS)

==/(=== => strict) is comparison operator and = is assignment operator. Use comparison operators to test the value and = to set the value/property

menu 在您的示例中未定义，变量 menu 应该保存具有 id 作为 menu 的 HTMLElement

function hideShow() {
  var menu = document.getElementById('menu');
  document.getElementById('menubutton').addEventListener("click", menutoggle, false)

  function menutoggle() {
    if (getComputedStyle(menu).getPropertyValue("display") == 'none') {
      menu.style.display = 'block';
    } else {
      menu.style.display = 'none';
    };
  }
};
window.onload = hideShow;

.menubutton {
  display: block;
  margin: 10px;
}
menu {
  background-color: blue;
  color: white;
  width: 100px;
  margin: 10px;
  padding: 10px;
  display: none;
}

<button id="menubutton" class="menubutton">Show Menu</button>
<menu id="menu">
  I am the menu!
</menu>