<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. How Classes are Found

    转载自: https://docs.oracle.com/javase/7/docs/technotes/tools/findingclasses.html How Classes are Found ...

  2. 机器A定时发文件给机器B-FTP实现

    机器A发文件的虚拟机 机器B收文件的虚拟机 机器A: 确认linux安装了ftp包,能启用ftp命令 定时器使用的是crontab 定时器设置步骤: 1．进入root用户 2．service cron ...

  3. Aspnet Core 对 Resetful API版本的支持

    在实际项目过程中API往往会收到迭代的影响,同时具备多个版本,因此resetful接口的版本话是非常重要的. 其实官方就提供了很好的支持,微软爸爸在nuget提供了Microsoft.AspNetCo ...

  4. MVC中ztree异步加载

    var setting = { async: { enable: true, url: "*****/LoadChild", autoParam: ["id"] ...

  5. mapreduce项目中加入combiner

    combiner相当于是一个本地的reduce,它的存在是为了减少网络的负担,在本地先进行一次计算再叫计算结果提交给reduce进行二次处理. 现在的流程为: 对于combiner我们有这些理解: M ...

  6. npm 模块的总结

      ,, , ,,,,执行工程中自身生命周期 当前 npm 工程如果定义了钩子此时会被执行(按照 install.postinstall.prepublish.prepare 的顺序). 最后一步是生 ...

  7. 结队第一次 plus

    作业描述 作业所属课程:软件工程1916|W(福州大学) 作业要求:结对第一次-原型设计 结对学号:221600328 221600106 作业目标:尝试结对合作,使用NABCD模型,会分析用户需求, ...

  8. Y1O001波分复用器

    # 波分复用器## 光分波器### 波分合波器种类* 耦合型 * 光纤熔融拉锥 * 熔融拉锥法是指将两根(或两根以上)除去涂覆层的光纤以一定的方法靠拢,在高温加热下熔融,同时向两侧拉伸,最终在加热区形 ...

  9. C++ 用变量定义数组

    较早的编译器是不同意这样做的,所以一些书籍比方以Tc解说的书本都说数组的下标不能是变量.在vc6.0下亦是如此. 只是在一些较新的编译器如dev c++已经支持了,例如以下代码不会报错 #includ ...

  10. 洛谷P3802：小魔女帕琪

    题目背景 从前有一个聪明的小魔女帕琪,兴趣是狩猎吸血鬼. 帕琪能熟练使用七种属性(金.木.水.火.土.日.月)的魔法,除了能使用这么多种属性魔法外,她还能将两种以上属性组合,从而唱出强力的魔法.比如说 ...