<!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. 【Java】定义魔法数字，以及枚举类的构造方法的使用

    JavaWeb项目中需要定义各种常量时,常用方法有: 写到Property配置文件中,用静态代码块优先加载配置文件.参考http://www.cnblogs.com/guxin/p/java-prop ...

  2. A-Frame不如x3dom

    昨天才发现还有A-Frame这么个框架,是Mozilla(moz://a 这个logo挺有创意的)出的,但看了一下其实现方式和语法后,感觉与x3d/x3dom还是有差距的. 二者的实现方式都是基于We ...

  3. 接口与virtual，override，new关键字

    一,类继承接口 1,首先我们定义一个简单的ITeacher接口,并定义一个Professor类继承它. public interface ITeacher { void Print(); } publ ...

  4. SQLSERVER SQL备份还原代码C#

    public class BakDBHelper { /// <summary> /// 创建数据库备份 /// </summary> public string Create ...

  5. .NET Framework posters with Namespaces & Types

    Framework is platform containing a huge library of types, methods, classes, etc., cataloged into nam ...

  6. A SIMPLE LIBRARY TO BUILD A DEEP ZOOM IMAGE

    My current project requires a lot of work with Deep Zoom images. We recently received some very high ...

  7. Linux进程间通信之管道(pipe)、命名管道(FIFO)与信号(Signal)

    整理自网络 Unix IPC包括:管道(pipe).命名管道(FIFO)与信号(Signal) 管道(pipe) 管道可用于具有亲缘关系进程间的通信,有名管道克服了管道没有名字的限制,因此,除具有管道 ...

  8. 苹果Mac OS系统修改Hosts文件的方法

    使用苹果Mac OS X系统的用户有很多,近期也有不少童鞋问我Mac怎么修改hosts,修改hosts的方式有很多,下面我就整理两种比较方便的方法吧,希望能够帮到大家. 在某些时候可能遇到了需要修改系 ...

  9. sqlmap注入常见用法一条龙 【转】

    sqlmap是一个灰常强大的sql注入检测与辅助工具,但是由于没有图形界面,基本上用起来比较麻烦,导致很多人可能宁愿用havij或者是pangonlin也不愿意麻烦去翻帮助界面,我自己也是把很多语句贴 ...

  10. tpshop添加后台菜单

    目前在后台公用函数文件function.php中getAllMenu方法里添加, 格式如下 array( 'system' => array('name'=>'系统设置','icon'=& ...