Показать и скрыть 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.

НО это работает только один раз, поэтому, если я нажму #openmenu после #closemenu, оно не будет работать ...

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>

Большинство разработчиков также не будут использовать встроенные обработчики событий, но это другой вопрос.