JS--模拟下拉菜单

最新推荐文章于 2024-02-09 17:33:18 发布
wanguo_S
最新推荐文章于 2024-02-09 17:33:18 发布
阅读量242
点赞数 1
CC 4.0 BY-SA版权
文章标签： javascript css html html5 css3
本文链接：https://blog.youkuaiyun.com/w_guo_S/article/details/104565205
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>JS--模拟下拉菜单</title>
	<style type="text/css">
		#box {
			width: 220px;
			height: 30px;
			margin: 30px auto;
		}
		#box span {
			display: block;
			width: 220px;
			height: 30px;
			line-height: 30px;
			border: 1px solid #000000;
			text-indent: 6px;
		}
		#box ul {
			list-style: none;
			width: 220px;
			margin: 0;
			padding: 0;
			border: 1px solid #666666;
			border-top: none;
		}
		#box li {
			border: 1px solid #808080;
			padding: 6px;
		}
		#box .active {
			background-color: slateblue;
			color: #ADD8E6;
		}
	</style>
</head>
<body>
	<div id="box">
		<span>北京</span>
		<ul style="display: none;">
			<li class="active">北京</li>
			<li>上海</li>
			<li>广州</li>
			<li>深圳</li>
		</ul>
	</div>
</body>
<script type="text/javascript">
	var ospan = document.querySelector("#box span");
	var oul = document.querySelector("#box ul");
	var ali = oul.children;
	var _index = 0;
	//标记：显示内容
	var _default = 0;
	//标记：显示样式
	//***************************************************************
	for (var i = 0; i < ali.length; i++) {
		ali[i].className = "";
		//清空li的class
	}
	//***************************************************************
	ali[_default].className = "active";
	//初始化，显示默认样式；
	ospan.innerHTML = ali[_default].innerHTML;
	//初始化，显示默认内容
		
	var _state = 0;
	//标记：0显示、1隐藏
	//**1.该事件执行时控制ul的显示************************************
	ospan.onclick = function(eve) {
	//sapn添加点击事件
		var e = eve || window.event;
		//兼容
		stopBubble(e);
		//阻止冒泡
		if (_state == 0) {
		//判断ul是否显示
			for (var i = 0; i < ali.length; i++) {
				ali[i].className = "";
				//清空li的class
			}
			ali[_index].className = "active";//
			_default = _index;
			oul.style.display = "block";
			//触发点击事件的同时ul显示
			_state = 1;
			//更改ul的显示状态码
		} else {
		//点击事件不触发时ul不显示
			oul.style.diaplay = "none";
			_state = 0
			//更改ul的显示状态码
		}
	}
	//**2.该事件执行时控制ul隐藏***************************************
	document.onclick = function() {
	//添加documen的点击事件，触发时ul隐藏
		oul.style.display = "none";
		_state = 0;
	}
		
	for (var i = 0; i < ali.length; i++) {
		ali[i].setAttribute("num", i);
		//添加自定义属性，等价于li编号
	//**3.该事件执行时更改li的样式***************************************
		ali[i].onmousemove = function() {
		//li添加鼠标移入事件
			_default = this.getAttribute("num");
			//将li的编号赋值给样式标记
			for (var j = 0; j < ali.length; j++) {
				ali[j].className = "";
			}
			this.className = "active";
			//触发鼠标移入事件时添加样式
		}
	//**该事件执行时将触发事件li的内容添加到span，*************************
	ali[i].onclick = function() {
	//li添加点击事件
		_default = this.getAttribute("num");
		//将li的编号赋值给样式标记
		_index = this.getAttribute("num");
		//将li的编号赋值给内容标记
		ospan.innerHTML = this.innerHTML;
		//点击事件触发时将li的内容添加到span中
		}
	}
	//**该事件执行时控制ul隐藏***************************************
	document.onkeydown = function(eve) {
	//键盘事件；注：添加给支持该事件的元素
		if (oul.style.display === "none") {
		//执行该事件时判断ul为隐藏时结束该事件的函数
			return;
		}
	var e = eve || window.event;
	//**该事件执行时控制li的样式、span的内容、ul的隐藏************************
		var _code = e.keyCode || e.which;
		//获取键盘事件
		//****************************************	
		if (_code == 38) {
		//按下上键时执行，并修改样式索引
			if (_default == 0) {
				_default = 0;
				//判断样式索引指向第一个元素时，赋值
		} else {
			_default--;
			//索引不为0时，每执行一次函数时样式索引减1
		}
		for (var i = 0; i < ali.length; i++) {
			ali[i].className = "";
		}
		ali[_default].className = "active";
		//给当前li添加样式
		}
		//****************************************
		if (_code == 40) {
		//按下下键时执行，并修改样式索引
			if (_default == ali.length - 1) {
				_default = ali.length - 1;
				//判断样式索引指向最后一个元素时，赋值
		} else {
			_default++;
			//索引指向不是最后一个元素时，每执行一次函数时样式索引加1
		}

		for (var i = 0; i < ali.length; i++) {
			ali[i].className = "";
		}
		ali[_default].className = "active";
		//给当前li添加样式
		}
		//****************************************
		if (_code == 13) {
		//按下回车键时执行，
			ospan.innerHTML = ali[_default].innerHTML;
			_index = _default;
			//样式索引赋值给内容索引
			oul.style.display="none";
			//执行该键盘事件的同时，ul隐藏
			_state = 0;
		}
	}
	//**阻止冒泡函数****************************************************
	function stopBubble(e) {
		if (e.stopPropagation) {
			e.stopPropagation();
		} else {
			e.cancelBubble = true;
		}
	}
</script>
</html>