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