CSS+JS点击展开/隐藏的折叠菜单

<!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=utf-8" />
<title>CSS+JS点击展开/隐藏的折叠菜单丨芯晴网页特效丨CsrCode.Cn</title>
</head>
<style> 
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 url() 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];
 var oUl = document.getElementsByTagName("ul")[0];
 oH2.onclick = function ()
 {
  var style = oUl.style;
  style.display = style.display == "none" ? "block" : "none";
  oH2.className = style.display == "none" ? "open" : ""
 }
}
</script>
<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>
</body>
</html>

<br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：源码爱好者</font></p>
posted @ 2012-08-23 17:24  芯晴驿站  阅读(1075)  评论(0)  编辑  收藏  举报