js之展開收縮選單，用到window.onload ,onclick,
阿新 • • 發佈：2018-12-24
效果：點選標籤1，如果列表標籤的style的display是block,改成none，否則改成block，來達到展開收縮選單效果
一.準備階段
html檔案
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="box"> 9 <p id="btn">標籤1</p> 10 <ul id="ull" style="display: block;"> 11 <li><a href="#">手寫</a></li> 12 <li><a href="#">拼音</a></li> 13 </ul> 14 </div> 15 </body> 16 </html>
執行後頁面效果
二.進階1：點選標籤1隱藏列表
html程式碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="box"> 9 <p id="btn" onclick="document.getElementById('ull').style.display='none'">標籤1</p> 10<ul id="ull" style="display: block;"> 11 <li><a href="#">手寫</a></li> 12 <li><a href="#">拼音</a></li> 13 </ul> 14 </div> 15 </body> 16 </html>
效果從上圖到下圖
