//解题思路
显示和隐藏歌曲列表主要是
切换样式,三目运算 ? : ;
none 隐藏 block 显示
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>单一按钮显示/隐藏 乐曲播放列表</title> <style type="text/css"> body,div,ul,li,h2{margin:0;padding:0;} body{font:12px/1.5 Tahoma;} 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 180px 15px no-repeat;border-color:#fff #e9edf2;} #outer h2.open{background-position:180px -12px;background:#eee;} #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> </head> <body> <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> <script type="text/javascript"> //解题思路 //显示和隐藏歌曲列表主要是 //切换样式,三目运算 ? : ; //none 隐藏 block 显示 window.onload = function(){ var ul = document.getElementById("outer").getElementsByTagName("ul")[0]; var h2 = document.getElementById("outer").getElementsByTagName("h2")[0]; h2.onclick = function(){ ul.style.display = ul.style.display == "block" ? "none" : "block"; h2.className = h2.className == "open" ? "" : "open"; }; } </script> </body> </html>