js模拟下拉菜单

最新推荐文章于 2024-05-09 00:14:24 发布
最新推荐文章于 2024-05-09 00:14:24 发布
阅读量852 收藏 2
点赞数 1
分类专栏： 下拉菜单 文章标签： js模拟下拉菜单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41224512/article/details/86028917
版权

JavaScript模拟下拉菜单

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			li {
				list-style: none;
			}
			
			#box {
				width: 200px;
				height: 25px;
				background: #f00;
				color: #fff;
				margin: 20px auto;
				cursor: pointer;
			}
			
			#box01 {
				width: 200px;
				height: 135px;
				background: #f1f1f1;
				margin: 0 auto;
				display: none;
			}
			
			#box01 li {
				width: 200px;
				height: 25px;
				background: #f00;
				color: #fff;
				border-bottom: 1px dashed #cecece;
				cursor: pointer;
			}
		</style>
	</head>

	<body>
		<div id="box">
			<span>请选择游戏名称</span>
		</div>
		<div id="box01">
			<ul>
				<li>地下城与勇士</li>
				<li>魔兽世界(国服)</li>
				<li>魔兽世界(台服)</li>
				<li>热血江湖</li>
				<li>大话西游2</li>
				<li>QQ幻想世界</li>
			</ul>
		</div>

		<script type="text/javascript">
			window.onload = function() {
				var oBox = document.getElementById("box");
				var aBox = document.getElementById("box01");
				var oLi = document.getElementsByTagName("li");

				oBox.onclick = function(e) {
					aBox.style.display = "block";
					var evt = e || event;
					if(evt.stopPropagation) {
						evt.stopPropagation();
					} else {
						evt.cancelable = true;
					}
					for(var i = 0; i < oLi.length; i++) {
						oLi[i].onclick = function() {
							oBox.innerHTML = this.innerHTML;
							aBox.style.display = "none"
							oBox.style.background = "#0f0";

						}
						oLi[i].onmouseover = function() {
							this.style.background = "#8b8b8b";
						}
						oLi[i].onmouseout = function() {
							this.style.background = "#f00";
						}
					}
					document.onclick=function(){
						aBox.style.display="none";
					}
				}
			}
		</script>
	</body>

</html>

有任何错误，敬请指教！

fengGer的bugs
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
用js来模拟下拉菜单
xxgTX的博客
10-15 968
我们在网站上看到的下拉菜单，有些是通过js来模拟的，那么怎么模拟呢，可以借鉴一下以下思路： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .cont{wid...
js模拟下拉菜单-鼠标、键盘事件操作
zyfacd的博客
03-02 536
js模拟下拉菜单 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{width:200px;height:30px;line-height: 30px...
【JS】模拟下拉菜单
xxxxxwxx的博客
08-22 972
鼠标点击时，下拉菜单出现鼠标划过或按键盘上下箭头时，选中的菜单背景色变化，选项内容显示在输入框内鼠标点击或按下回车或空格键时，对应的内容显示在输入框内且下拉菜单消失。
Web前端最全前端入门篇（四十六）JS应用1二级下拉菜单问题记录(2)，系列教学
2401_84434880的博客
05-09 671
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。
js模拟下拉菜单-键盘、鼠标（代码详解）
Zzexi的博客
08-30 469
以下代码实现了下拉菜单的所有功能，既可以鼠标操作也可以通过键盘实现上下选择，基本效果如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init...
JS--模拟下拉菜单
万国
02-28 171
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS--模拟下拉菜单</title> <style type="text/css"> #box { width: 220px; height: 30px; margin...
CSS模拟下拉菜单
qq_45279574的博客
11-01 259
啥也不说了直接上菜（怎么实现的注解里有） <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; list-style: none; } #cont { w
使用js模拟下拉菜单-鼠标-键盘
weixin_45195822的博客
08-31 380
使用js模拟下拉菜单 我们都知道HTML的原生下拉菜单的样式很单一，不美观，且有些样式难以修改，我们可以通过js模拟一个下拉菜单，这样就会比较方便操作它的样式了。 这里我们使用ul来模拟下拉框： <div class="box"> <span>空当接龙</span> <ul> <li ...
运用js简单模拟下拉菜单
old_village的博客
02-12 885
在各个网站上，基本上点击导航栏中的标签都会弹出下拉菜单，这里用js代码简单的实现一下： 第一步：先对要隐藏的下拉菜单进行设置 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp
js模拟下拉菜单-鼠标键盘事件-效果图
JackieDYH的博客
04-07 589
<!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-...
JavaScript模拟下拉菜单代码
10-30
在JavaScript编程中，模拟...总结来说，这个JavaScript模拟下拉菜单的案例涵盖了HTML结构、CSS样式设计以及JavaScript交互实现。通过这样的实践，开发者可以更好地理解和掌握Web前端开发中的动态交互和响应式设计技术。
JS模拟select下拉菜单
10-29
JavaScript模拟下拉菜单 使用JavaScript（通常配合CSS）模拟`<select>`，我们可以创建更灵活的组件。以下是一个基本的实现步骤： #### (1) HTML结构 首先，我们需要创建一个具有模拟下拉菜单所需元素的容器，...
JS模拟bootstrap下拉菜单效果实例
10-22
主要介绍了JS模拟bootstrap下拉菜单效果,结合完整实例形式分析了javascript动态操作页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
js模拟点击select下拉菜单列表代码
11-19
以上就是使用JavaScript模拟点击`<select>`下拉菜单列表的方法。通过这样的技术，我们可以实现自定义的交互效果，比如自动展示下拉菜单、限制用户的选择等。在实际开发中，结合CSS和jQuery等库，可以创造出更多丰富...
基于Springboot和Vue的图书借还管理系统源码 图书借还管理系统代码（高分毕设）
07-28
图书借还管理系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
C语言内存管理：静态与动态分配的较量
07-28
C语言是一种通用的编程语言，由丹尼斯·里奇（Dennis Ritchie）在20世纪70年代早期于美国电话电报公司（AT&T）的贝尔实验室开发。C语言以其高效性、灵活性和可移植性而闻名，它是一种过程式编程语言，提供了对底层硬件的直接访问能力。 C语言的特点包括： 1. **简洁高效**：C语言的语法简洁，执行效率高，适合编写系统软件。 2. **接近硬件**：C语言提供了对内存地址和位操作的直接控制，使其非常适合硬件级编程。 3. **可移植性**：C语言编写的程序可以在不同的操作系统和硬件平台上编译和运行，具有很好的可移植性。 4. **丰富的库支持**：C语言拥有大量的标准库，如标准输入输出库（stdio.h）、数学库（math.h）等。 5. **结构化编程**：C语言支持结构化编程，允许使用循环、条件判断和函数等控制结构。 6. **指针**：C语言的指针功能强大，可以操作内存地址，实现复杂的数据结构和算法。 7. **编译型语言**：C语言是一种编译型语言，源代码需要通过编译器转换成机器码才能运行。 C语言广泛应用于操作系统（如Unix和Linux）、嵌入式系统、高性能
通讯协议规范-命令包格式
07-28
提供一份通讯协议规范，包含命令包、格式等，在上下位机调试的时候可参考该文档，制定对应的通讯协议。
四足宠物机器狗动态步行规划与仿真.pdf
最新发布
07-28
四足宠物机器狗动态步行规划与仿真
js搜索框双重下拉菜单
02-01
JS搜索框双重下拉菜单是一种常见的网页搜索功能，它可以提供更加便捷和智能的搜索体验。下面是一种实现方式： 1. HTML结构： ```html 请输入关键词"> <div id="searchResults"></div> ``` 2. JavaScript代码： ```...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值