原型思想实现函数的调用
<!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>
效果如下：
