js模拟下拉菜单-键盘、鼠标（代码详解）

最新推荐文章于 2022-08-13 16:57:39 发布

Zzexi

最新推荐文章于 2022-08-13 16:57:39 发布

阅读量482

点赞数 1

分类专栏： js 文章标签： js模拟下拉菜单

本文链接：https://blog.csdn.net/Zzexi/article/details/100154568

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

以下代码实现了下拉菜单的所有功能，既可以鼠标操作也可以通过键盘实现上下选择，基本效果如下：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{width:200px;height:30px;line-height: 30px;margin: 20px auto;}
        .box span{display: block;width: 195px;line-height: 30px;border: solid 1px black;padding-left: 5px;}
        .box ul{width: 200px; margin: 0;padding: 0;list-style: none;overflow: auto;border: solid 1px black;border-top:none;display: none;}
        .box ul li{padding-left: 5px;}
        .active{background: #35f;color: #fff;}
    </style>
</head>
<body>
    <div class="box">
        <span>北京</span>
        <ul>
            <li class="active">北京</li>
            <li>上海</li>
            <li>广州</li>
            <li>深圳</li>
            <li>杭州</li>
            <li>西安</li>
            <li>安徽</li>
        </ul>
    </div>
</body>
<script>
	var ospan = document.querySelector(".box span");
	var oul = document.querySelector(".box ul");
	var ali = document.querySelectorAll(".box ul li");
	
	var i = 0;
	//用i数值来设置ul的显示或隐藏,0为显示,1为隐藏
	var index = 0;
	//设置默认索引值
	ospan.innerHTML = ali[index].innerHTML;
	//把span标签的内容改为数组ali中索引为index的内容
	setActive();		
	//调用函数setActi(在文末)



// 绑定鼠标事件::
	ospan.onclick=function(eve){
		//绑定ospan点击事件
		var e = eve || window.event;
		//处理事件源的兼容问题
		e.stopPropagation();
		// 阻止事件冒泡
		if(i == 0){
			oul.style.display = "block";
			i=1;
			setActive();
			//调用函数setActive(在文末)
		}
		//当i为0时,ul则显示，i设置为0
		else{
			oul.style.display = "none";
			i=0;
		}
		//当i为1时,ul则隐藏，i设置为1
	}
	
	document.onclick = function(){
		oul.style.display = "none";
		i=0;
	}
	//绑定页面的点击事件,点击页面时ul隐藏，i设置为1
		
	for(var j=0;j<ali.length;j++){
		//遍历数组
		ali[j].index = j;
		//提前给li绑定索引，方便后面设置索引
		ali[j].onmouseover = function(){
			//绑定鼠标在li上移动事件
			for(var k=0;k<ali.length;k++){
				//遍历数组
				ali[k].className = "";
				 // 取消所有li的className
			}
			this.className = "active";
			//设置当前的li的className为"active",从而获得css中.active的样式
		}
		ali[j].onclick = function(){
			//绑定点击li的鼠标事件
			ospan.innerHTML = this.innerHTML;
			//把span标签的内容改为当前li的内容
			index = this.index;
			//把默认索引改为当前li的索引,从而使点击li后关闭下拉菜单,span标签内容变成当前点击选择的内容
		}
	}
	
	
	
	
	
	// 绑定键盘事件::
	document.onkeydown = function(eve){
		e = eve || window.event;
		if(i == 0) return;
		//如果下拉菜单未打开(ul为隐藏状态),则不执行
		if(e.keyCode == 38){
			//在键盘上按上键
			if(index == 0){
				index = 0;
			}
			else{
				index--;
			}
			//如果索引为0时,则索引一直为0(索引为0时，即此时li以及为第一个，所以不能再减了);否则索引自减1
			setActive();
			//调用函数setActi(在文末)
			ospan.innerHTML = ali[index].innerHTML;
		}
		
		if(e.keyCode == 40){
			//按下键
			if(index == ali.length-1){
				index = ali.length-1;
			}
			else{
				index++;
			}
			//如果索引为ali.length-1(数组最后一位)时,则索引一直为ali.length-1;否则索引自增1
			setActive();
			//调用函数setActi(在文末)
			ospan.innerHTML = ali[index].innerHTML;
			//把span标签的内容改为数组ali中索引为index的内容
		}
		
		
		//按回车键,隐藏ul,设置i=0
		if(keyCode == 13){
			ospan.style.display = "none";
			i = 0;
		}	
	}
	
	
	//功能型函数:根据索引设置当前项
	function setActive(){
		for(var k=0;k<ali.length;k++){
			//遍历数组
			ali[k].className = "";
			// 取消所有li的className
		}
		ali[index].className = "active";
		//设置ali数组中索引为index的li的className为"active",从而获得css中.active的样式
	}
</script>
</html>

Zzexi

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
js模拟下拉菜单-键盘、鼠标（代码详解）

以下代码实现了下拉菜单的所有功能，既可以鼠标操作也可以通过键盘实现上下选择，基本效果如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init...
复制链接

扫一扫

专栏目录