CSS笔记 - fgm练习 2-9 - 播放列表收缩展开

 

练习地址： http://www.fgm.cc/learn/lesson2/09.html

 

<style>
    *{
        margin: 0;padding: 0;font-size: 12px;list-style: none;
    }
    .outer{
        width: 180px;
        margin: 10px auto;
        border: 1px solid #000;
        
    }
    .outer>h2{
        padding: 5px;
        background: #ccc url(imgs/ico.gif) 160px 12px no-repeat;
        /* 注意背景图的设置，如果背景有颜色，也要写在background里。
           url是相对于h2元素的左上角来定位。
         */

        /* 右边的三角形下标怎么设置？
           示例程序用的是有上下箭头的精灵图。
           ！！！ 还需要了解之前学的纯CSS方法！  */
    }

    /* 通过给h2标签 增减类名， 来设置不同点击状态的背景图定位。 
       即切换同个背景图的不同部分， 以分别显示上、下的图标。 */
    /* #outer>h2.open{background-position:180px -12px;} */
    .outer>ul{
        background-color: #f0f0f0;
    }
    .outer>ul>li{
        line-height: 20px;
        padding: 2px 5px;
    }
    .outer>ul>li:hover{
        background-color: #fff;
        text-decoration: underline;
    }
    </style>

    <script>
    window.onload = function()
    {
        var oBtn = document.getElementsByTagName('h2')[0];
        var oUl = document.getElementsByTagName('ul')[0];

        oBtn.onclick = function()
        {
            oUl.style.display = oUl.style.display == 'none'? 'block':'none';
        };
    };
    </script>

 

转载于:https://www.cnblogs.com/carpenterzoe/p/10245532.html