1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. *{ padding:0; margin:0; list-style:none;}
  8. .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;}
  9. .all ul li{ width:100px; height:30px; background:url(img/libg.jpg); float:left; margin-right:10px; position:relative; cursor:pointer;}
  10. .all ul ul{ position:absolute; left:0; top:30px; display:none;}
  11. </style>
  12. </head>
  13.  
  14. <body>
  15. <div class="all" id="list">
  16.     <ul>
  17.         <li>一级菜单
  18.             <ul>
  19.                 <li>二级菜单</li>
  20.                 <li>二级菜单</li>
  21.                 <li>二级菜单</li>
  22.             </ul>
  23.         </li>
  24.         <li>一级菜单
  25.             <ul>
  26.                 <li>二级菜单</li>
  27.                 <li>二级菜单</li>
  28.                 <li>二级菜单</li>
  29.             </ul>
  30.         </li>
  31.         <li>一级菜单
  32.             <ul>
  33.                 <li>二级菜单</li>
  34.                 <li>二级菜单</li>
  35.                 <li>二级菜单</li>
  36.             </ul>
  37.         </li>
  38.     </ul>
  39. </div>
  40. </body>
  41. </html>
  42. <script>
  43.     // 获取对象     遍历对象操作     显示模块   隐藏模块
  44.  
  45.     function List(id) {  //  获取对象
  46.         this.id = document.getElementById(id);  // 取 id 值
  47.         this.lis = this.id.children[0].children;  // 获取一级菜单所有的li
  48.     }
  49.     // init 初始化
  50.     List.prototype.init = function() {  // 遍历所有的li 显示和隐藏
  51.         var that  = this;
  52.         for(var i=0;i<this.lis.length;i++)
  53.         {
  54.             this.lis[i].index = i;
  55.             this.lis[i].onmouseover = function() {
  56.                 that.show(this.children[0]);  //  显示出来
  57.             }
  58.             this.lis[i].onmouseout = function() {
  59.                 that.hide(this.children[0]);  // 隐藏起来
  60.             }
  61.         }
  62.     }
  63.     //  显示模块
  64.     List.prototype.show = function(obj) {
  65.         obj.style.display = "block";
  66.     }
  67.     // 隐藏模块
  68.     List.prototype.hide = function(obj) {
  69.         obj.style.display = "none";
  70.     }
  71.     var list = new List("list");  // 实例化了一个对象 叫  list
  72.     list.init();
  73. </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#使用ActiveMQ实例

    1. ActiveMQ消息总线简介 消息队列(Message Queue,简称MQ),从字面意思上看,本质是个队列,FIFO先入先出,只不过队列中存放的内容是message而已.主要用作不同进程.应用 ...

  2. C语言 · 企业奖金发放

    算法提高 企业奖金发放   时间限制:1.0s   内存限制:512.0MB      企业发放的奖金根据利润提成.利润低于或等于10万元时,奖金可提10%:利润高于10万元,低于20万元时,低于10 ...

  3. iOS第三方支付集成

    支付宝(alipay)和微信支付(Wechat Pay) 支付宝: 一.总体流程 (1)先与支付宝签约.获得商户ID(partner)和账号ID(seller)(注冊app⽤用) (2)下载对应的公钥 ...

  4. Android训练课程(Android Training) - NFC基础

    NFC 基础 本文档介绍了在Android上的基本的NFC任务.它说明了如何发送和接收的NDEF消息(NDEF messages)的形式的表单里包含的NFC数据(NFC data),并介绍Androi ...

  5. Android ListView实现单击item出现删除按钮以及滑动出现删除按钮

    我自己一个人弄的公司的产品客户端,所以还是想记录下来以免忘记或者丢失... 在我的上一篇博文(点击打开链接)是一个文件管理的东西,基础组件也是ListView所以在此只是改动一下而已. 单击: 点击出 ...

  6. 【Html】div 加载 html页面的方法

    做网页的单页面应用时,需要在一个HTML的Div元素中加载另一个HTML页面,以前有一种方法就是用iframe,举例如下:(亲测可行) <div class="main-contain ...

  7. JAVA写代码必须知道的编程工具

    Eclipse: 一个开放源代码的.基于Java的可扩展开发平台. NetBeans: 开放源码的Java集成开发环境,适用于各种客户机和Web应用. IntelliJ IDEA: 在代码自动提示.代 ...

  8. UnityEditor--------------之Selection类的变量解析

    UnityEditor的Selection类 Unity官方文档:https://docs.unity3d.com/ScriptReference/Selection.html Selection S ...

  9. unity---各种资源对应的格式

    我们打包AssetBundle后,Unity3D会根据文件的后缀名将文件转换为特定的类型对象存储起来,我们后期获取时需要根据这些类型取出打包的数据,这里记录下不同后缀文件打包后的类型. 文本格式 支持 ...

  10. 异常之交叉编译---arm-vfp-linux-gnu/bin/ld: cgic.o: Relocations in generic ELF (EM: 3)

    /opt/arm-2009q1/bin/../lib/gcc/arm-none-linux-gnueabi/4.3.3/../../../../arm-none-linux-gnueabi/bin/l ...