效果：点击标签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>
效果从上图到下图
