javascript - 显示和隐藏 Javascript HTML5

Question

所以，我正在用 html 制作我的设计师作品集，我想要一个仅在按下此字符时显示的菜单...

但我是编程新手，我的代码非常简单，所以我使用这个:

function toggle_visibility(id) {
  var e = document.getElementById(id);
  if(e.style.visibility == 'hidden')
      e.style.visibility = 'visible';
  else
      e.style.visibility = 'hidden';
}

function untoggle_visibility(id) {
  var e = document.getElementById(id);
  if(e.style.visibility == 'visible')
      e.style.visibility = 'hidden';
  else
      e.style.visibility = 'visible';
}    

<div id="openmenu" style="visibility: visible;" onclick="toggle_visibility('menu'); onclick=toggle_visibility('closemenu');">openmenu</div>
    
<div id="closemenu" style="visibility: hidden;" onclick="untoggle_visibility('menu'); onclick=untoggle_visibility('closemenu');">closemenu</div>
    
<div id="menu" style="visibility: hidden;">...</div>

问题是它只能工作一次...

当我点击 #openmenu 时，它会显示 #menu 和 #closemenu，当我点击 #closemenu 时 它隐藏了 #menu 和 #closemenu。

但是它只工作一次，所以如果我在 #closemenu 之后按 #openmenu，它不会工作...

Answer 1

您的代码有误。

onclick="toggle_visibility('menu'); onclick=toggle_visibility('closemenu');"

所以上面的代码只运行一次。当它运行时它会重新分配 onclick 因为你有 onclick=functionCall

所以在它运行之后你基本上有<div onclick=undefined>因为函数没有运行。

function toggle_visibility(id) {
  var e = document.getElementById(id);
  if (e.style.visibility == 'hidden')
    e.style.visibility = 'visible';
  else
    e.style.visibility = 'hidden';
}

function untoggle_visibility(id) {
  var e = document.getElementById(id);
  if (e.style.visibility == 'visible')
    e.style.visibility = 'hidden';
  else
    e.style.visibility = 'visible';
}

<div id="openmenu" style="visibility: visible;" onclick="toggle_visibility('menu');toggle_visibility('closemenu');">openmenu</div>

<div id="closemenu" style="visibility: hidden;" onclick="untoggle_visibility('menu');untoggle_visibility('closemenu');">closemenu</div>

<div id="menu" style="visibility: hidden;">...</div>

大多数人会如何编码？通过切换类。

function toggle_visibility(ids) {
  ids.forEach( function (id) {
    var elem = document.getElementById(id);
    elem.classList.toggle('visibilityHidden')
  })
}

.visibilityHidden {
  visibility: hidden;
}

/* use hidden if you do not want it to take up space */
.hidden {
  display: none;
}

<div id="openmenu" onclick="toggle_visibility(['menu','openmenu','closemenu']);">openmenu</div>

<div id="closemenu" class="visibilityHidden" onclick="toggle_visibility(['menu','openmenu','closemenu']);">closemenu</div>

<div id="menu" class="visibilityHidden">...</div>

大多数开发人员也不会使用内联事件处理程序，但这是另一个问题。