<!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. C语言 · 字符串编辑

    算法训练 字符串编辑   时间限制:1.0s   内存限制:512.0MB      问题描述 从键盘输入一个字符串(长度<=40个字符),并以字符 ’.’ 结束.编辑功能有: 1 D:删除一个 ...

  2. 中断描述符表（Interrupt Descriptor Table，IDT)

    中断描述符表(Interrupt Descriptor Table,IDT)将每个异常或中断向量分别与它们的处理过程联系起来.与GDT和LDT表类似,IDT也是由8字节长描述符组成的一个数组. #pr ...

  3. Listener 监听Session内的对象

    Listener用于监控Session内的对象,分别是HttpSessionBindingListener与HttpSessionActivationListener.它们的触发时机分别为: Http ...

  4. 无法转换json问题 Error: Model.nodeDataArray value is not an instance of Array or NodeList or HTMLCollection

    var jsonobj=eval('('+t+')'); 使用eval 函数,讲后台json字符串转换为前台jsarray数组. 如果使用 ajax不会出现这种情况,因为会自动转换. 但是如果直接从后 ...

  5. PCL深度图像(1)

    目前深度图像的获取方法有激光雷达深度成像法,计算机立体视觉成像,坐标测量机法,莫尔条纹法,结构光法等等,针对深度图像的研究重点主要集中在以下几个方面,深度图像的分割技术 ,深度图像的边缘检测技术 ,基 ...

  6. SQLITE WITH ENTITY FRAMEWORK CODE FIRST AND MIGRATION

    Last month I’ve a chance to develop an app using Sqlite and Entity Framework Code First. Before I st ...

  7. 最近迷上了GUI

    package windows; import java.awt.BorderLayout; import javax.swing.ButtonGroup; import javax.swing.JB ...

  8. 关于阅读JDK源码的准备

    说明:本篇是给自己看的. 笑 最近突然有冲动 想研究下JDK的源码,搜索了一番,基本上推荐从集合开始,精华部分包括:集合.IO.多线程.网络编程. 虚拟机部分先放一放吧,感觉现在不适合我这种半路出家的 ...

  9. TPshop标签

    很多cms 中有很多 标签, 商品标签 文章标签  列表标签  几十个标签, 让开发者头疼, 难记,  TPshop开发者考虑到这点, 用了一个万能标签, 开发者非常方便实用 TPshop万能标签只要 ...

  10. （实用）win7/8修改远程桌面连接默认端口

    记录备忘. 在启用windows操作系统的远程连接时,使用默认的3389端口是一件比较危险的事情,通常我们将其改成一个比较独特的端口,使得目标系统不会直接将远程桌面连接的功能直接暴露在网络环境下. 步 ...