<!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. 火狐FireFox恢复备份失败，无法处理备份文件

    问题:火狐浏览器丢失书签后尝试恢复书签,按[Ctrl + Shift + B]弹出我的足迹,选择[导入和备份]-->[恢复]中任一文件,弹窗[无法处理备份文件]. 解决办法: 先找到并打开火狐浏 ...

  2. [mount]linux 挂载时 mount: wrong fs type, bad option, bad superblock on /dev/sdb

    原因:挂载时未格式化,使用的文件系统格式不对 解决方案:格式化 sudo mkfs -t ext4 /dev/sdb 再挂载 sudo mount /dev/sdb /xxx/ 用df -h检查,发现 ...

  3. Java 原码 反码 补码

    本篇文章讲解了计算机的原码, 反码和补码. 并且进行了深入探求了为何要使用反码和补码, 以及更进一步的论证了为何可以用反码, 补码的加法计算原码的减法. 论证部分如有不对的地方请各位牛人帮忙指正! 希 ...

  4. Lucene整理--索引的建立

    看lucene主页(http://lucene.apache.org/)上眼下lucene已经到4.9.0版本号了, 參考学习的书是依照2.1版本号解说的,写的代码样例是用的3.0.2版本号的,版本号 ...

  5. name是个特殊的变量名吗

    这是为什么?求大神

  6. Building Apache Thrift on CentOS 6.5

    Building Apache Thrift on CentOS 6.5 Starting with a minimal installation, the following steps are r ...

  7. jq 智能搜索

    案例:http://www.runoob.com/jqueryui/example-autocomplete.html <input  type="text" style=& ...

  8. socket阻塞与非阻塞，同步与异步、I/O模型

    socket阻塞与非阻塞,同步与异步 1. 概念理解 在进行网络编程时,我们常常见到同步(Sync)/异步(Async),阻塞(Block)/非阻塞(Unblock)四种调用方式:同步:      所 ...

  9. Struts 2应用程序安全功能的配置详解

    安全性是Web应用程序开发工作中最关键的问题之一.在基于servlet的应用程序里,保护应用程序资源的办法有两种:一是对应用程序进行配置(web.xml),二是使用Java代码硬编码到程序中.前一种方 ...

  10. android选取系统相册图片后，识别图中二维码

    项目中添加设备操作需要扫描二维码,考虑到多种扫码方式,也添加直接识别二维码图片的操作. 首先跳转系统相册选取图片 Intent intent = new Intent(Intent.ACTION_PI ...