下面要做实现的效果
收缩和展的功能
遵循网页布局,行为,结构,样式 分离
下面是html 结构代码:
<div id="drop" class="down_list"> <h2 class="up">播放列表</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> <li><a href="#">外婆</a></li> </ul> </div>
css 代码:
*{ padding:0; margin:0;} li{ list-style:none} body{ background:#f6f9fc; } .down_list{ width: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 { width: 200px; overflow: hidden; background: #e9edf2; font-size: 12px; } .down_list li { width: 200px; float: left;} .down_list a { display: block; line-height: 25px; padding-left: 10px; color: #6b7980; text-decoration: none; } //a 标签样式 .down_list a:hover { background: #fff; text-decoration: underline; }
js代码:
window.onload = function () { var oDiv = document.getElementById(‘drop‘); //获取drop对象 var oH2 = oDiv.getElementsByTagName(‘h2‘)[0]; //得到h2元素 []表示索引 var oUl = oDiv.getElementsByTagName(‘ul‘)[0]; oH2.onclick = showHideUl; //赋值事件 } function showHideUl() { var oDiv = document.getElementById(‘drop‘); var oH2 = oDiv.getElementsByTagName(‘h2‘)[0]; var oUl = oDiv.getElementsByTagName(‘ul‘)[0]; if (oUl.style.display == ‘none‘) { //判断样式 oUl.style.display = ‘block‘; oH2.className = ‘up‘; //给不同的css类 } else { oUl.style.display = ‘none‘; oH2.className = ‘down‘; } }
总结: 播放列表收缩展开功能核心部分,就是实现 样式的隐藏和切换
在javascript中 以对象.style.display 呈现隐藏或显示
以对象.className来实现类对象的切换