<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. [转] iphoneX、iphoneXS、iphoneXSMax、iphoneXR适配

    基础知识 1. 关于iphoneX .iphoneXS.iphoneXSMax.iphoneXR机型的大小和像素   机型尺寸 注意:开发人员只需要记住开发尺寸 2. 屏幕组成 齐刘海(44px) + ...

  2. [转]7行Python代码的人脸识别

    https://blog.csdn.net/wireless_com/article/details/64120516 随着去年alphago 的震撼表现,AI 再次成为科技公司的宠儿.AI涉及的领域 ...

  3. SDK踩坑全纪录

    No1: Unity2017.1版本导出的android工程放到Android Studio上跑起来非常卡,Unity2017.3或4版本导出就没问题. 对比后发现gradle文件有差异,特此标注 1 ...

  4. leetcode刷题四<寻找两个有序数组的中位数>

    给定两个大小为 m 和 n 的有序数组 nums1 和 nums2. 请你找出这两个有序数组的中位数,并且要求算法的时间复杂度为 O(log(m + n)). 你可以假设 nums1 和 nums2 ...

  5. SSL/TLS抓包出现提示Ignored Unknown Record

    SSL/TLS抓包出现提示Ignored Unknown Record 出现这种提示有两种情况.第一种,抓包迟了,部分SSL/TLS的协商数据没有获取,Wireshark无法识别和解析.第二种,数据包 ...

  6. mysql 8.0 密码加密方式的坑

    问题:新安装好MySQL 8.0和Navicat之后,连接时总是报: 1251 Client does not support authentication protocol requested by ...

  7. 展开被 SpringBoot 玩的日子 《 五 》 spring data jpa 的使用

    在上篇文章< 展开被 SpringBoot 玩的日子 < 二 >WEB >中简单介绍了一下spring data jpa的基础性使用,这篇文章将更加全面的介绍spring da ...

  8. 第n次搭建 SSM 框架

    什么说第 N 次搭建SSM框架呢? 刚学习java的时候,搭建 SSM 框架想做一个个人项目之类的,后来没搭起来,也就拖延了,进入公司之后,接触的第一个项目就是SSM的,模仿了一下,也能搭个简简单单的 ...

  9. BZOJ.2054.疯狂的馒头(并查集)

    BZOJ 倒序处理,就是并查集傻题了.. 并查集就是确定下一个未染色位置的,直接跳到那个位置染.然而我越想越麻烦=-= 以为有线性的做法,发现还是要并查集.. 数据随机线段树也能过去. //18400 ...

  10. [Tips] Git使用经验

    brach 查看目前branch git branch 显示结果: * master *表示这是当前的branch. 建立分支 git branch 分支名 删除分支 git branch -d 分支 ...