说明：代码来自网络。注释为笔者学习时添加。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>单一按钮显示隐藏</title> <style> body,div,ul,li,h2{ margin:0; padding:0; } body{ font:12px/1.5 Tahoma;/*字号，行高18px*/ } ul{ list-style-type:none;/*去除列表样式*/ } #outer{ width:200px; border:1px solid #aaa;/*灰色*/ margin:10px auto;/*左右置中*/ } #outer h2{ cursor:pointer; color:#57646e;/*暗蓝色*/ font-size:14px; font-weight:400;/*字体粗细*/ border:1px solid; height:30px; line-height:30px; padding-left:10px; background:#ced3d7 url(img/ico.gif) 180px 15px no-repeat; border-color:#fff #e9edf2; } #outer h2.open{ background-position:180px -12px; } #outer ul{ border-top:1px solid #dee3e6;/*灰色*/ } #outer li{ height:25px; line-height:25px; vertical-align:top; } #outer a{ display:block;/*显示为块元素*/ color:#6b7980;/*暗蓝色*/ background:#e9edf2;/*浅色*/ text-decoration:none;/*文本装饰无*/ padding:0 10px; } #outer a:hover{ background:#fff;/*白色*/ text-decoration:underline;/*下划线*/ } </style> <script> window.onload = function () { var oH2 = document.getElementsByTagName("h2")[0];//获取h2中的第一个 var oUl = document.getElementsByTagName("ul")[0];//获取ul中的第一个 oH2.onclick = function () { var style = oUl.style; style.display = style.display == "none" ? "block" : "none";//三元操作法，切换display的值 oH2.className = style.display == "none" ? "open" : ""; } } </script> </head> <body> <!--div包裹1个2级标题和1个ul列表--> <div id="outer"> <h2>播放列表...</h2> <ul> <li><a href="javascript:;">玩家之徒 - 蔡依林</a></li> <li><a href="javascript:;">原谅我就是这样的女生 - 戴佩妮</a></li> <li><a href="javascript:;">猜不透 - 丁当</a></li> <li><a href="javascript:;">自导自演 - 周杰伦</a></li> <li><a href="javascript:;">浪漫窝 - 弦子</a></li> <li><a href="javascript:;">流年 - 王菲</a></li> </ul> </div> </body> </html>