js方式实现下拉列表框

编程小号 • 2023-12-21 09:17 • 未分类

原型思想实现函数的调用

<!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);
		// 获取一级标题的所有li
		this.lis = this.id.children[0].children;
	}
	// 2.初始化 遍历所有的li
	List.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>

效果如下：