zoukankan      html  css  js  c++  java
  • js 小练习—标题的显示及隐藏

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>标题显示及隐藏</title>
    </head>

    <body>
    <!--第一题:标题显示及隐藏-->
    <!--<div class="menu-wrap">
    <a href="#none">系统设置</a>
    <div class="menu">
    <ul>
    <lil>系统状态</lil>
    <li>系统运行时间</li>
    <li>语言设置</li>
    </ul>
    </div>
    </div>
    <div class="menu-wrap">
    <a href="#none">新闻管理</a>
    <div class="menu">
    <ul>
    <li>添加新闻</li>
    <li>修改新闻</li>
    <li>删除新闻</li>
    </ul>
    </div>
    </div>
    <div class="menu-wrap">
    <a href="#none">订单管理</a>
    <div class="menu">
    <ul>
    <li>发货管理</li>
    <li>查询订单</li>
    <li>打印订单</li>
    </ul>
    </div>
    </div>
    <div class="menu-wrap">
    <a href="#none">员工管理</a>
    <div class="menu">
    <ul>
    <li>添加员工</li>
    <li>修改信息</li>
    <li>查看信息</li>
    </ul>
    </div>
    </div>
    <div class="menu-wrap">
    <a href="#none">密码管理</a>
    <div class="menu">
    <ul>
    <li>密码设置</li>
    </ul>
    </div>
    </div>-->
    <script>
    /**
    *第一题:标题显示及隐藏
    */
    var menuWraps = document.getElementsByClassName('menu-wrap');
    for (var i = 0; i < menuWraps.length; i++){
    menuWraps[i].addEventListener('click' , function (e) {
    var menuWrap = e.target.parentNode;
    var menu = menuWrap.getElementsByClassName('menu')[0];
    if (menu) {
    var display = getStyle(menu, 'display');
    menu.style.display = display == 'none' ? 'block' : 'none';
    }
    })
    }

    function getStyle(obj, attr) {
    if (obj.currentStyle) {
    return obj.currentStyle[attr];
    }else {
    return getComputedStyle(obj, '伪类')[attr];
    }
    }
    </script>
    </body>
    </html>
     
  • 相关阅读:
    前端基础之BOM和DOM
    JavaScript
    css-属性、样式调节
    计算机操作系统
    计算机组成原理
    计算机基础之编程
    css-选择器
    HTML-标签
    python打印有色字体
    mysql 数据库语法详解
  • 原文地址:https://www.cnblogs.com/chuangzi/p/6736163.html
Copyright © 2011-2022 走看看