<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 {

            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>

</head>

<body>

    <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>

</body>

</html>

<script>

    window.onload = function () {

        new ListMenu().init();

    }

    function ListMenu() {

        this.list = list.children;

        this.init = function () {

            for (let i = 0; i < this.list.length; i++) {

                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>

js使用面向对象编写下拉菜单的更多相关文章

  1. js递归生成树形下拉菜单

    需求:我需要把一个单表的数据转换成类似菜单那种如图所示:我呢需要把这个菜单树放入到下框里面去如图所示: 下面是实现思路:1.第一步1.1var afTypeJson=${afTypeJson}// 这 ...

  2. JS网页特效操作流程——下拉菜单列表与登录注册弹窗效果

    下拉菜单列表 <style>        *{            margin: 0px;            padding: 0px;        }        .men ...

  3. jsavascript 面向对象的下拉菜单

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  4. js+css实现简单下拉菜单

    <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312&qu ...

  5. js实现按钮开关.单机下拉菜单

    通过onclick单击事件,实现效果,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf- ...

  6. 8.bootstrap下拉菜单、按钮组、按钮式下拉菜单

    下拉菜单 dropdown 对齐方式: .dropdown-menu-right     .dropdown-menu-left <div class="container" ...

  7. js面向对象封装级联下拉菜单列表

    本实例开发的级联下拉菜单是根据已有json数据创建的DOM元素.点击文本框后,显示一级菜单.如果菜单中包含子菜单,菜单右侧会有指示箭头.点击菜单之后,会再显示下一级菜单,以此类推.当菜单下无子菜单时, ...

  8. JS实现带复选框的下拉菜单

    这段时间在做后台的时候需要一个可以复选的下拉菜单,用到的是easyUI中的combo的Demo,先看看官方easyUI:http://www.jeasyui.com/documentation/ind ...

  9. 形行色色的下拉菜单（HTML/CSS JS方法 jQuery方法实现）

    HTML/CSS方法实现下拉菜单来源:慕课网<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

随机推荐

  1. ASP.NET Core微服务 on K8S学习笔记（第一章：详解基本对象及服务发现）

    课程链接:http://video.jessetalk.cn/course/explore 良心课程,大家一起来学习哈! 任务1:课程介绍 任务2:Labels and Selectors 所有资源对 ...

  2. MyBatis insert/delete/update 的返回值

    insert,返回值是:新插入行的主键(primary key):需要包含<selectKey>语句,才会返回主键,否则返回值为null. <insert id="inse ...

  3. 局域网IP地址

    A类: 10.X.X.X是私有地址(私有地址就是在互联网上不使用,而被用在局域网络中的地址). 127.X.X.X是保留地址,用做循环测试用的. B类: 172.16.0.0---172.31.255 ...

  4. c# List列表数据转换成树形结构

    把List列表结构 转换成树形结构 /// <summary> /// 构造树形Json /// </summary> public static class TreeJson ...

  5. vue中 v-show和v-if的区别？

    v-show的操作元素的属性是display v-if的操作元素的移除和新建 还有一个就是权限的时候,v-show普通用户能看到,用v-if的时候普通用户看不到.

  6. PCB铺铜

    问:为何要铺铜?答:一般铺铜有几个方面原因.1.EMC.对于大面积的地或电源铺铜,会起到屏蔽作用,有些特殊地,如PGND起到防护作用.2.PCB工艺要求.一般为了保证电镀效果,或者层压不变形,对于布线 ...

  7. PostgreSQL>窗口函数的用法

    PostgreSQL之窗口函数的用法 转载请注明出处:https://www.cnblogs.com/funnyzpc/p/9311281.html PostgreSQL的高级特性本准备三篇的(递归. ...

  8. 记录一次大量CLOSE_WAIT的情况

    近期的项目中,有一个特殊的需求,对于每个客户端程序有若干个机构,对于每个机构有不同的客户端证书,程序间隔一段时间向服务端进行请求,根据请求的成功与否更新各机构的状态(如正常,证书未配置,证书过期等). ...

  9. Python操作Excel, 开发和调用接口，发送邮件

    笔记: 上周回顾: 模块: 导入模块的顺序 lyl.py # def hhh(): pass name = 'lyl' a.py import lyl import sys from lyl impo ...

  10. Gcd&Exgcd算法学习小记

    Preface 对于许多数论问题,都需要涉及到Gcd,求解Gcd,常常使用欧几里得算法,以前也只是背下来,没有真正了解并证明过. 对于许多求解问题,可以列出贝祖方程:ax+by=Gcd(a,b),用E ...