今天做了一个音乐播放器的隐藏和显示：
实现界面如下：
html代码：<!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>单一按钮显示/隐藏 - 妙味课堂 - www.miaov.com</title>
<link href="miaov_style.css" rel="stylesheet" type="text/css" />
//js部分
<script type="text/javascript">
function showHideUl()
{
var xx=document.getElementById('drop');
var yy=xx.getElementsByTagName('ul')[0];
var zz=xx.getElementsByTagName('h2')[0];
if(yy.style.display==='block') <!-- 当为显示的时候，进行判断，点击后隐藏列表 -->
{
yy.style.display='none';
zz.className='up';
}
else
{
yy.style.display='block';
zz.className='down';
}
}
</script>
</head>
<body>
<div id="drop" class="down_list">
<h2 class="up" onclick="showHideUl();">播放列表</h2>
<ul>
<li><a href="#">玩爱之徒 - 蔡依林</a></li>
<li><a href="#">原谅我就是这样的女生 - 戴佩妮</a></li>
<li><a href="#">猜不透 - 丁当</a></li>
<li><a href="#">自导自演 - 周杰伦</a></li>
<li><a href="#">浪漫窝 - 弦子</a></li>
<li><a href="#">流年 - 王非</a></li>
</ul>
</div>
</body>
</html>
- CSS代码：
- @charset "utf-8";
/* CSS Document */* { padding: 0; margin: 0; }
li { list-style: none; }
body { background: #f6f9fc; }.down_list { 200px; overflow: hidden; border: 1px solid #aab4bc; background: url(images/down_list_h2_bg.gif) repeat-x; margin: 50px auto 0; }
.down_list h2 { height: 25px; line-height: 25px; border: 1px solid #dee3e6; border-top: 1px solid #f3f5f7; padding-left: 10px; font-size: 14px; font-weight: normal; color: #57646e; cursor: pointer; }
.down { background: url(images/down.gif) no-repeat 180px center; }
.up { background: url(images/up.gif) no-repeat 180px center; }
.down_list ul { 200px; overflow: hidden; background: #e9edf2; font-size: 12px; }
.down_list li { 200px; float: left; }
.down_list a { display: block; line-height: 25px; padding-left: 10px; color: #6b7980; text-decoration: none; }
.down_list a:hover { background: #fff; text-decoration: underline; }
刚做的时候把这个想复杂了，需要用到dom文本，js部分其实比较简单，基本逻辑思路就是 ：
点击播放列表时候，ul的列表进行展示和隐藏，需要获取ul和h2的tagName属性，利用display进行展示和隐藏！设置className
上下三角形箭头设置为背景图像，当点击时候，改变h2的className!
刚开始思路错误，认为是点击三角形的图片，实现ul的显示和隐藏！
另外对于css部分，list-style属性要多加记忆，其次当鼠标移入时，实现某一行的变色，而不仅仅是文字变色的用法是：设置li
如：#div3 ul li{
width :200px;
background: #E5EDF2;//设置其宽度和背景颜色
}
#div3 ul li:hover{ //改变整行的颜色
text-decoration: underline;
background: white;
color: #6B7980;
}
#div3 ul li a:hover{ //改变文字的颜色
color:red;
}