JS 播放列表收缩展开

下面要做实现的效果

收缩和展的功能

遵循网页布局，行为，结构，样式 分离

下面是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来实现类对象的切换

下载DEMO