zoukankan      html  css  js  c++  java
  • jsavascript 面向对象的下拉菜单

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style type="text/css">
    *{ padding:0; margin:0; list-style:none;}
    .all{ 330px; height:30px; background:url(img/bg.jpg) no-repeat; margin:100px auto; line-height:30px; text-align:center; padding-left:10px; margin-bottom:0;}
    .all ul li{ 100px; height:30px; background:url(img/libg.jpg); float:left; margin-right:10px; position:relative; cursor:pointer;}
    .all ul ul{ position:absolute; left:0; top:30px; display:none;}
    </style>
    </head>
    
    <body>
    <div class="all" id="list">
        <ul>
            <li>一级菜单
                <ul>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                </ul>
            </li>
            <li>一级菜单
                <ul>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                </ul>
            </li>
            <li>一级菜单
                <ul>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                </ul>
            </li>
        </ul>
    </div>
    </body>
    </html>
    <script>
        // 获取对象     遍历对象操作     显示模块   隐藏模块
    
        function List(id) {  //  获取对象
            this.id = document.getElementById(id);  // 取 id 值
            this.lis = this.id.children[0].children;  // 获取一级菜单所有的li
        }
        // init 初始化
        List.prototype.init = function() {  // 遍历所有的li 显示和隐藏
            var that  = this;
            for(var i=0;i<this.lis.length;i++)
            {
                this.lis[i].index = i;
                this.lis[i].onmouseover = function() {
                    that.show(this.children[0]);  //  显示出来
                }
                this.lis[i].onmouseout = function() {
                    that.hide(this.children[0]);  // 隐藏起来
                }
            }
        }
        //  显示模块
        List.prototype.show = function(obj) {
            obj.style.display = "block";
        }
        // 隐藏模块
        List.prototype.hide = function(obj) {
            obj.style.display = "none";
        }
        var list = new List("list");  // 实例化了一个对象 叫  list
        list.init();
    </script>
  • 相关阅读:
    echarts 报表使用
    Eclipse Java注释模板设置详解
    简单实现支付密码输入框 By HL
    一个label 混搭不同颜色,不同字体的文字.. by 徐
    有关MVC设计模式 #DF
    自定义粘贴板-陈鹏
    TableView 常用技巧与功能详解
    ios 类别和扩展-赵小波
    推荐一本书--《浪潮之巅》(完整版的哦)----董鑫
    iOS block的用法 by -- 周傅琦君
  • 原文地址:https://www.cnblogs.com/xiaomifeng/p/6797612.html
Copyright © 2011-2022 走看看