日記式之jQuery製作簡易選單（2018.12.7）
阿新 • • 發佈：2018-12-08
<html> <head> <meta charset="utf-8"/> <title>jQuery製作簡易選單</title> </head> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script> <style type="text/css"> #head{ width:1350px; height:50px; background-color: gold; } #menu{ width:150px; height:500px; background-color: gainsboro; float:left } #body{ width:1350px; height:500px; background-color:burlywood; } #footer{ width:1350px; height:50px; background-color: greenyellow; } ul li{ list-style-type: none; } #showpostone{ position: relative; left:10px; } #showposttwo{ position: relative; left:10px; } </style> <script type="text/javascript"> function btone(){ $("#showpostone").toggle(100); } function bttwo(){ $("#showposttwo").toggle(100); } </script> <body> <div id="head"> 頂部 </div> <div id="menu"> <ul> <label for="" onclick="btone()">投票管理</label> <div id="showpostone"> <li><label for="">投票釋出</label></li> <li><label for="">投票統計</label></li> </div> </ul> <ul> <label for="" onclick="bttwo()">活動管理</label> <div id="showposttwo"> <li><label for="">活動釋出</label></li> <li><label for="">活動統計</label></li> </div> </ul> </div> <div id="body"> 主體 </div> <div id="footer"> 底部 </div> </body> </html>
文記：這是延續昨天的基本佈局做的，用jQuery製作選單，用label標籤裡的onclick屬性呼叫方法，再用jQuery裡的toggle事件，實現是顯示與隱藏，當滑鼠點選的時候，括號裡是以毫秒為單位顯示或隱藏區域。