Question

我试图学习使用JavaScript操纵DOM，我已经学习了一些关于codecademy的绝对基础知识，但没有与DOM有关。这是我的第一次尝试，我在我的代码中所做的评论可能看起来有点业余，但他们用我自己的话来帮助我了解正在发生的事情。

问题：

我正在尝试按下它的ID来显示/隐藏另一个div。我能够让它从display:none转到display:block，但之后我想再次点击该按钮并隐藏菜单，所以我尝试添加if / else语句但之后几乎几乎是随机的尝试我被卡住了。

我已经使用Google搜索了解决方案，但我发现的代码都不像我的代码，我希望有人能指出我的代码中需要做什么，所以我可以跟着从头到尾。

在我尝试了一些不起作用的事情之后，{p> 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）

== /（=== =＆gt; strict）是比较运算符，=是赋值运算符。使用比较运算符测试值，并使用=设置value/property

您的示例中未定义

menu，变量menu应该HTMLElement id为menu

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>

Answer 2

您在if：

中缺少“=”符号

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;

应该是

if(document.getElementById('menu').style.display == 'none')

另外，尽量不要在加载时添加eventListener。只需在你的html中执行：

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

function hideShow() {
    if (document.getElementById('menu').style.display == 'none') {
      document.getElementById('menu').style.display = 'block';
    } else {
      document.getElementById('menu').style.display = 'none';
    };
}

将div设置为显示时出现问题：将其设置为阻止后无

2 个答案: