js方式实现下拉列表框

原型思想实现函数的调用

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 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;cursor: pointer;position: relative;}.all ul ul{position: absolute;left: 0;top: 30px;display: none;}</style></head><body><div class="all" id="list"><ul><li>设备<ul><li>Aui6100</li><li>Aui6200</li><li>Aui6300</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>//获取对象 遍历对象操作  显示模块 隐藏模块//    1.获取对象function List(id){this.id = document.getElementById(id);// 获取一级标题的所有lithis.lis = this.id.children[0].children;}// 2.初始化 遍历所有的liList.prototype.init = function(){var that = this;console.log(that);for (var i = 0; i < this.lis.length; i++) {this.lis[i].index = i;this.lis[i].onmouseenter = function(){console.log(this);that.show(this.children[0]);}this.lis[i].onmouseout = function(){that.hide(this.children[0]);}}}// 3.显示模块List .prototype.show = function(obj){obj.style.display = "block";}// 4.隐藏模块List.prototype.hide = function(obj){obj.style.display = "none";}// 5.实例化对象var list = new List("list");console.log(list);list.init();
</script>

效果如下：

js方式实现下拉列表框相关推荐

Ajax和JSON-学习笔记01【原生JS方式实现Ajax】
Java后端学习路线笔记汇总表[黑马程序员] Ajax和JSON-学习笔记01[原生JS方式实现Ajax] Ajax和JSON-学习笔记02[JQuery方式实现Ajax] Ajax和JSON-学 ...
js方式调用php_javascript调用PHP和PHP调用javascript的方法
javascript调用PHP和PHP调用javascript的方法发布时间:2020-06-22 17:03:14 来源:亿速云阅读:262 作者:Leah 这篇文章将为大家详细讲解有关java ...
js方式调用php_举例说明JS调用PHP和PHP调用JS的方法
举例说明JS调用PHP和PHP调用JS的方法在学习任何一门编程语言,我们都会听到调用这个词,那么,在javascript中是如何调用php的呢?在php中也可以调用js吗?下面就让我们一起来看看吧. ...
AJAX方式进行验证码的判断(JS方式）
1.生成验证码 <%@ page language="java" pageEncoding="UTF-8"%> <%@ page conten ...
ASP.NET或者 js方式实现文件夹多图片浏览的方式
1.JS方式,限制大,而且图片名称如果不规则的话会获取不全. <html><head><style> img { max-width:1300px; }</s ...
通过JS方式实现隐藏手机号码中间4位数
在前端开发中,遇到如下需求:隐藏手机号码,将中间几位替换为*.通过js如何实现手机号码隐藏中间4位呢?下面整理几种实现方式: 1.使用正则: function geTel(tel){var reg = ...
js方式调用php_js如何调用php函数
js调用php函数的方法:jQuery.ajax({ type: "POST", url: 'your_functions_address.php', dataType: 'jso ...
防止用户重复提交表单数据，session方式，js方式
1. 使用session的方式创建Token令牌解决创建一个生成令牌的工具类,在该类中有返回类的对象,生成token的方法 public class TokenUtil {/**单例设计模式(保证类 ...
js方式调用php_js如何调用php方法参数
js调用php方法参数的方法:1.直接URL编码,代码为[string = encodeURIComponent( )]:2.使用escape编码,代码为[$.getJSON("admin. ...

js方式实现下拉列表框

js方式实现下拉列表框相关推荐

最新文章

热门文章