zoukankan      html  css  js  c++  java
  • [读码时间] 单一按钮显示隐藏

    说明:代码来自网络。注释为笔者学习时添加。

    <!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
  • 相关阅读:
    黑马程序员——指针的应用
    黑马程序员——C语言基础常量、运算符、函数
    黑马程序员——数组
    黑马程序员——循环结构for,while,do..while
    webView去掉右侧导航条
    使用Eclipse构建Maven的SpringMVC项目
    win7 自动登录
    eclipse 自动提示
    apache+php+mysql 环境配置
    KMP子串查找算法
  • 原文地址:https://www.cnblogs.com/sx00xs/p/6435910.html
Copyright © 2011-2022 走看看