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>

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