[读码时间] 单一按钮显示隐藏

说明：代码来自网络。注释为笔者学习时添加。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>单一按钮显示隐藏</title>
    <style>
        body,div,ul,li,h2{
            margin:0;
            padding:0;
        }
        body{
            font:12px/1.5 Tahoma;/*字号，行高18px*/
        }
        ul{
            list-style-type:none;/*去除列表样式*/
        }
        #outer{
            width:200px;
            border:1px solid #aaa;/*灰色*/
            margin:10px auto;/*左右置中*/
        }
        #outer h2{
            cursor:pointer;
            color:#57646e;/*暗蓝色*/
            font-size:14px;
            font-weight:400;/*字体粗细*/
            border:1px solid;
            height:30px;
            line-height:30px;
            padding-left:10px;
            background:#ced3d7 url(img/ico.gif) 180px 15px no-repeat;
            border-color:#fff #e9edf2;
        }
        #outer h2.open{
            background-position:180px -12px;
        }
        #outer ul{
            border-top:1px solid #dee3e6;/*灰色*/
        }
        #outer li{
            height:25px;
            line-height:25px;
            vertical-align:top;
        }
        #outer a{
            display:block;/*显示为块元素*/
            color:#6b7980;/*暗蓝色*/
            background:#e9edf2;/*浅色*/
            text-decoration:none;/*文本装饰无*/
            padding:0 10px;
        }
        #outer a:hover{
            background:#fff;/*白色*/
            text-decoration:underline;/*下划线*/
        }
    </style>
    <script>
        window.onload = function () {
            var oH2 = document.getElementsByTagName("h2")[0];//获取h2中的第一个
            var oUl = document.getElementsByTagName("ul")[0];//获取ul中的第一个
            oH2.onclick = function () {
                var style = oUl.style;
                style.display = style.display == "none" ? "block" : "none";//三元操作法，切换display的值
                oH2.className = style.display == "none" ? "open" : "";
            }
        }
    </script>
</head>
<body>
    <!--div包裹1个2级标题和1个ul列表-->
    <div id="outer">
        <h2>播放列表...</h2>
        <ul>
            <li><a href="javascript:;">玩家之徒 - 蔡依林</a></li>
            <li><a href="javascript:;">原谅我就是这样的女生 - 戴佩妮</a></li>
            <li><a href="javascript:;">猜不透 - 丁当</a></li>
            <li><a href="javascript:;">自导自演 - 周杰伦</a></li>
            <li><a href="javascript:;">浪漫窝 - 弦子</a></li>
            <li><a href="javascript:;">流年 - 王菲</a></li>
        </ul>
    </div>
</body>
</html>
View Code