<!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. [Timer]应用层实现sleep

    转自:https://www.cnblogs.com/longbiao831/p/4556246.html Select只能做延时,可以做回调吗? 本文讲述如何使用select实现超级时钟.使用sel ...

  2. Go Revel - Validation（验证）

    Revel提供了内建函数用于验证参数.它提供了: 一个`Validation`上下文集合来管理验证错误信息(键与消息内容) 辅助函数用于检查数据并将错误信息放入上下文 一个模板函数用于从`Valida ...

  3. HttpWebRequest、HttpWebResponse获取网页

    1,通过HttpWebRequest.HttpWebResponse获取一个流 request = (HttpWebRequest)System.Net.WebRequest.Create(this. ...

  4. python多线程同步机制condition

    #!/usr/bin/env python# -*- coding: utf-8 -*- import threadingimport time def customer(cond): t = thr ...

  5. HTML5里的input标签的required属性的提示

    <input type="text" name="usr_name" required='required' oninvalid="setCus ...

  6. php curl_multi系列函数实现多线程抓取网页

    最近几天在做一个多搜索引擎关键字排名查询工具,用于及时方便的了解关键词在各大搜索引擎的排名. 在抓取360搜索的时候,发现360搜索每页只支持显示10个搜索结果,如果想获取100个搜索结果数据,就得搜 ...

  7. R中ifelse、which、%in%的用法

    R中ifelse.which.%in%的用法 (2014-02-08 13:54:08)标签: 教育 在R学习过程中,遇到了ifelse.which.%in%,下面分别举例,说明他们的用法.1.ife ...

  8. CSS遮罩层的实现

    偶然发现自己原来写了一个CSS遮罩层,虽然这个东西没什么技术含量,但如果本人离开公司后又遇见此类问题,那么可能又得花些时间来找资料了.所以决定还是把它记下来吧. 直接上代码吧. 第一步,html代码: ...

  9. [zookeeper] Zookeeper伪分布式集群配置

    参考配置:http://blog.csdn.net/clementad/article/details/48057059 注意要点: 启动时注意分别启动 bin/zkServer.sh start c ...

  10. 【转】Android下使用配置文件(Preferences)

    http://www.aslibra.com/blog/post/android_SharedPreferences.php android下可以方便的使用key-value的配置文件: // S.P ...