顯示和隱藏 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它hiddes的#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>

大多數開發人員也不會使用內聯事件處理程序，但這是一個不同的問題。