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# json提取多层嵌套到数组-- C# json 数组
    JS中的prototype
    JS_&&||
    js 匿名函数 js-函数定义方法
    js匿名函数确实是个好东西
    JavaScript:undefined!=false之解 及==比较的规则
    Sql 中常用日期转换Convert(Datetime) convert datetime
    jquery设置元素的readonly和disabled
    eWebEditor复制粘贴图片时过滤域名
    java构造函数使用方法总结
  • 原文地址:https://www.cnblogs.com/sx00xs/p/6435910.html
Copyright © 2011-2022 走看看