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

    css部分

        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
                list-style: none;
            }
    
            .all {
                width: 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 {
                width: 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>

    HTML部分

        <div class="all">
            <ul id="list">
                <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>

    JS部分

    <script>
        window.onload = function () {
            return new ListMenu().init();
        }
        //设置构造函数
        function ListMenu() {
            //获取一级菜单
            this.list = list.children;
            //添加方法
            this.init = function () {
                //通过循环遍历的方法给每一个以及菜单添加鼠标移入和移出事件
                for (let i = 0; i < this.list.length; i++) {
                    //添加鼠标移入事件,事件中的this指向的是window,因此要改变this指向
                    this.list[i].onmouseenter = function () {
                        //调用方法并传参(对象)
                        this.show(this.list[i].children[0]);
                    }.bind(this);  
                    //添加鼠标移出事件
                    this.list[i].onmouseleave = function () {
                        //调用方法并传参(对象)
                        this.hide(this.list[i].children[0]);
                    }.bind(this);
                }
            }
            //设置鼠标移入菜单显示的方法
            this.show = function (obj) {
                obj.style.display = "block";
            }
            //设置鼠标移出菜单隐藏的方法
            this.hide = function (obj) {
                obj.style.display = "none";
            }
        }
    </script>
  • 相关阅读:
    启动ASM 数据库的步骤
    ora15031 DBCA找不到ASM磁盘组
    ORA12514 解决方法
    Rhel Linux 5.1 (32 位)上安装 Oracle ASM数据库 11g 第 1 版
    Oracle ASM for linx as 4 x8664 创建过程
    在安腾AI64 RHEL3 U3服务器上安装ORACLE10G
    ora12528 : message 12528 not found; product=RDBMS ; facility=ora
    linux下启动oracle服务和监听程序
    linux内核升级RPM包安装问题!!!!
    AS4 下安装Oracle 10g(ASM & RAW)
  • 原文地址:https://www.cnblogs.com/self-hard/p/10366995.html
Copyright © 2011-2022 走看看