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

jsavascript 面向对象的下拉菜单的更多相关文章

  1. js使用面向对象编写下拉菜单

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

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

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

  3. 2016/3/24 ①数据库与php连接 三种输出fetch_row()、fetch_all()、fetch_assoc() ②增删改时判断（布尔型） ③表与表之间的联动 ④下拉菜单 ⑤登陆 三个页面

    ①数据库与php连接   图表 header("content-type:text/html;charset=utf-8"); //第一种方式: //1,生成连接,连接到数据库上的 ...

  4. 初学者--bootstrap（六）组件中的下拉菜单----在路上（10）

    组件---下拉菜单 用于显示链接列表的可切换.有上下文的菜单.下拉菜单的 JavaScript 插件让它具有了交互性. 将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 p ...

  5. Bootstrap3系列：按钮式下拉菜单

    1. 基本实例 把按钮放入 .btn-group 中,加入适当的菜单标签,让按钮触发下拉菜单. 1.1 示例代码 <div class="btn-group"> < ...

  6. Bootstrap3系列：下拉菜单

    1.引用Bootstrap 示例引用的Bootstrap版本:v3.3.7 <script src="~/Scripts/jquery-2.2.4.min.js">&l ...

  7. 如何在webapp中做出原生的ios下拉菜单效果

    github:https://github.com/zhoushengmufc/iosselect webapp模仿ios下拉菜单 html下拉菜单select在安卓和IOS下表现不一样,iossel ...

  8. Html5+Css3制作下拉菜单的三种方式

    一.渐变式改变ol的高度 1.外部为ul标签,在每个li里嵌套一个ol列表2.设置外部li左浮动,内部ol标签绝对定位,外部li标签相对定位3.设置ol的高为0,溢出隐藏4.外部li标签:hover ...

  9. IOS第二天-新浪微博 - 添加搜索框，弹出下拉菜单 ，代理的使用 ，HWTabBar.h（自定义TabBar）

    ********HWDiscoverViewController.m(发现) - (void)viewDidLoad { [super viewDidLoad]; // 创建搜索框对象 HWSearc ...

随机推荐

  1. 浏览器自己主动填表安全漏洞：查看浏览器保存的password

    我通常会使用浏览器保存自己的帐号和password,下次登录就无需又一次输入,很方便.而像傲游这种浏览器还提供了自己主动同步功能,让我一个傲游帐号.就带着互联网上全部帐号password去旅行. 昨天 ...

  2. Android中Intent具体解释(一)

    Intent是一种消息传递机制.它能够在应用程序内使用,也能够在应用程序间使用,主要用途分为: 1.使用类名显示的启动一个特定的Activity或Service 2.启动Activity或Servic ...

  3. jsp标准动作

    JSP标准动作元素的使用格式为:<jsp:标记名>,它採用严格的xml标签语法来表示.这些jsp标签动作元素是在用户请求阶段运行的,这些标准动作元素是内置在jsp文件里的,所以能够直接使用 ...

  4. Android训练课程(Android Training) - 使用Volley传输网络数据（Transmitting Network Data Using Volley）

    使用Volley传输网络数据(Transmitting Network Data Using Volley) Volley 是一个 HTTP 库,它使得在Android应用程序中操作网络更容易,是重要 ...

  5. Spring Boot 自定义属性 以及 乱码问题

    自定义属性 使用随机数及自定义配置类 中文乱码问题 1添加配置 2设置文件类型 1IDEA 2eclipse 自定义属性 application.properties提供自定义属性的支持,这样我们就可 ...

  6. Sword redis配置

    Redis 配置 Redis 的配置文件位于 Redis 安装目录下,文件名为 redis.conf. --查看配置 你可以通过 CONFIG 命令查看或设置配置项(使用CONFIG必须在redis客 ...

  7. redis、kafka、rabittMQ对比

    本文不对三者之间的性能进行对比,只是从三者的特性上区分他们,并指出三者的不用应用场景. 1.publish/subscribe 发布订阅模式如下图所示可以具有多个生产者和发布者,redis.kafka ...

  8. 关于Unity中Shader的使用

    在游戏的开发过程中,程序员不太会自己去写shader,因为写起来很麻烦,而且只有Unity会报错,编译器也没有什么提示. 通常是拿别人的shader改一改,当然,程序员还是要能看懂和会一点shader ...

  9. ImageMagick安装

    图片处理是大多数电子商务系统必须用到的组件,下面介绍ImageMagick的安装! 一.软件列表ImageMagick-6.7.1-0.tar.gzJMagick-6.4.0-0.tar.gzjpeg ...

  10. caffe中的错误与解决问题：

    1.在使用draw_net.py的时候,提示如下错误: AttributeError: 'google.protobuf.pyext._message.RepeatedScalarConta' obj ...