如何進行下拉菜單行為？

Question

 <script> function init() { document.getElementById("header").onclick = function() { document.getElementById('subtwo').style.display = 'none'; } window.onload=init; </script>

 <style> * { margin: 0; box-sizing: border-box; } body { font: 1.2em Verdana, sans-serif; background-color: antiquewhite; } h2, h3 { text-align: center; } p { padding: 0.5em 0.2em; } ul { list-style-type: none; padding-left: 0; } a { text-decoration: none; color: crimson; display: block; } #header { background-color: tan; padding: 0.5em; } #mainMenu { overflow: hidden; } #mainMenu li { background-color: white; border: 1px solid black; text-align: center; float: left; width: 25%; } #leftBar, #rightBar { padding-top: 2em; } #leftBar { float: left; width: 8em; } #leftBar li { width: 100%; text-align: center; background-color: white; border-bottom: 1px solid black; } #leftBar li:first-child { border-top: 1px solid black; } #leftBar a, #mainMenu a { padding: .25em 0; } #rightBar { float: right; width: 8em; padding-left: 0.4em; } #main { padding: 2em 5px 1em 5px; border: 1px solid tan; border-width: 0 8em; border-bottom: 1px solid black; } #footer ul { padding: 10px 8em; } #footer li { float: left; width: 33%; text-align: center; border-right: 1px solid black; font-size: 0.8em; } #footer li:last-child { border-right-style: none; } #leftBar a:hover, #mainMenu a:hover { color: black; background-color: #ccc; background-color: peru; } #footer a:hover { display:inline; border-bottom: 1px solid red; } .submenu { background-color: gold; border: 2px solid black; border-radius: .5em; } #subone { height:100px; } #subtwo { height: 120px; } </style>

 <body> <div id="header"> <h2>Lab8 - Submenus</h2> </div> <div id="mainMenu"> <ul> <li id="one"><a href="#"> Home &nbsp; </a></li> <li id="two"><a href="#"> About Us &nbsp;&#9660;</a></li> <li id="three"><a href="#"> Directory &nbsp;&#9660;</a></li> <li><a href="#"> Map </a></li> </ul> </div> <div id ="subone" class ="submenu"> <h3>The first submenu. </h3> </div> <div id ="subtwo" class ="submenu"> <h3>The second submenu.</h3> </div> <div id="leftBar"> <ul> <li><a href="#"> Link 1 </a></li> <li><a href="#"> Link 2 </a></li> <li><a href="#"> Link 3 </a></li> <li><a href="#"> Link 4 </a></li> <li><a href="#"> Link 5 </a></li> </ul> </div> <div id="rightBar"> <p> Here is perhaps a small related article. </p> <p>And perhaps a few more links</p> </div> <div id="main"> <h3> Content Heading </h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula, lorem sed hendrerit auctor, sapien dolor consectetur enim, nec pharetra odio orci nec massa. Duis suscipit elit libero, sit amet cursus ante. Mauris laoreet tellus in urna suscipit ornare. Aenean erat purus, commodo in aliquet et, aliquet at quam. </p><p> Suspendisse commodo imperdiet dolor mattis scelerisque. Morbi blandit sem ac augue gravida sed vehicula augue blandit. Mauris hendrerit vestibulum faucibus. Integer tellus augue, adipiscing id commodo vitae, volutpat id nunc. Maecenas ultrices, ante a commodo rutrum, sapien purus consectetur nibh, id auctor erat lectus ac purus. Morbi id suscipit nunc. </p> </div> <div id="footer"> <ul> <li><a href="http://csci.viu.ca/~hohman/"> Bill H </a></li> <li><a href="https://validator.w3.org/"> HTML </a></li> <li><a href="https://jigsaw.w3.org/css-validator/"> CSS </a></li> </ul> </div> </body>

我首先要添加一些CSS規則來定位，然后“隱藏”子菜單，然后添加JavaScript事件處理程序以創建下拉菜單行為。 如果有人可以告訴我該怎么做，我將不勝感激。 如果我單擊一個單詞，將彈出一個下拉菜單。

相似網頁的副本

Answer 1

此功能包含在HTML中。 除非您真的需要重新創建輪子，否則請使用下面為您實現的功能。 源MDN選擇

 <!-- The second value will be selected initially --> <select name="text"> <!--Supplement an id here instead of using 'text'--> <option value="value1">Value 1</option> <option value="value2" selected>Value 2</option> <option value="value3">Value 3</option> </select>

如果您正在尋找最美觀的UI，請嘗試使用Twitter的Bootstrap或Google的Material Components Web之類的庫。

如何進行下拉菜單行為？

問題描述

1 個解決方案

解決方案1
0 已采納 2018-03-29 01:37:12

如何進行下拉菜單行為？

問題描述

1 個解決方案

解決方案1 0 已采納 2018-03-29 01:37:12

解決方案1
0 已采納 2018-03-29 01:37:12