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