用Javascrip写出selelct下拉菜单效果

话不多说，先上效果图：

html代码：

<p>2.模拟selelct下拉菜单</p><div class="twobox"><div id="twoboxsamll">请选择游戏名称<input type="text" id="wenben" onclick="dInput()"><input type="button" value="搜索"> </div><ul id="oul"><li>共和国之辉</li><li>侠盗猎车</li><li>英雄联盟</li><li>QQ飞车</li><li>QQ炫舞</li></ul></div>

CSS代码：

.twobox{width: 100%;height: 500px;background-color: grey;margin: 0 auto;}#twoboxsamll{width: 350px;height:25px;margin: 0px auto;}#wenben{border-radius: 15px;`在这里插入代码片`outline: none;}#oul{border: 1px solid white;width: 170px;list-style: none;position: relative;background: burlywood;left: 615px;display: none;}#oul li{border-bottom: 1px dashed white;cursor: pointer;}

Javascript代码：

let oul = document.getElementById("oul");let wenben = document.getElementById("wenben");let oli = document.getElementById("oul").children;function dInput(evt){let e = evt || event;  //为了让多数浏览器都兼容，所以用事件的兼容写法oul.style.display = "block";e.stopPropagation?e.stopPropagation():e.cancelBubble=true; //阻止事件冒泡}for(let j=0;j<oli.length;j++){  //循环每个Li，oli[j].onclick = function(evt){  //点击哪个Li让哪个Li做相应的操作let e = evt || event; //为了让多数浏览器都兼容，所以用事件的兼容写法wenben.value=this.innerHTML;//把点击的Li的内容传给文本框oul.style.display = "none"; //点击选择之后将ul隐藏}}document.onclick = function(evt){  //点击界面的任何一个地方让ul隐藏let e = evt || event;oul.style.display = "none";}

这个里面涉及到了一个事件冒泡：具体详解请看：事件冒泡及阻止事件冒泡详解

用Javascrip写出selelct下拉菜单效果相关推荐

用CSS写出一个下拉菜单小箭头
向右小箭头 width: 13px; height: 13px; border: 1px solid #0F1520; border-top: none; border-left: none; tra ...
模拟selelct下拉菜单（搜索框简易版）
模拟selelct下拉菜单(可用于搜索框) // 点击 span 显示列表 ul // 点击文档 document ,隐藏列表ul // 点击每一个li , 将当前li的内容显示到 span中 ...
用jQuery实现下拉菜单效果
用jQuery实现下拉菜单效果下拉菜单效果展示代码 <!DOCTYPE html> <html><head>`在这里插入代码片`<meta charset ...
动态二级下拉菜单html,js实现简洁大方的二级下拉菜单效果代码
本文实例讲述了js实现简洁大方的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款简洁大方的二级下拉菜单,菜单的颜色自己根据需要重新定义吧,这里仅给大家提供一种制作二级菜单的思路,整体效 ...
html下拉列表插件,js+CSS实现模拟华丽的select控件下拉菜单效果
本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个JS+CSS技术实现的Select控件效果,模拟出来的,比默认的Select更漂亮,有了这个 ...
php下拉菜单指示图标如何添加,jquery实现很酷的网页顶部图标下拉菜单效果
本文实例讲述了jquery实现很酷的网页顶部图标下拉菜单效果.分享给大家供大家参考.具体如下: 兼容IE和火狐的顶部菜单栏,带图标的图文菜单,还有右上角的下拉导航效果,一个演示包括了两种菜单,都是很实 ...
HTML下拉菜单为什么是灰的,CSS实现的灰色下拉菜单效果代码
本文实例讲述了CSS实现的灰色下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于CSS实现的灰色下拉菜单,支持二级的导航菜单,如果不喜欢灰色的话,颜色你自己调整下,完善后效果是相当不错的 ...
利用jQuery制作的导航下拉菜单效果
利用jQuery制作的导航下拉菜单效果,其实利用css同样可以实现导航下拉菜单效果,但自从学习了jQuery后,感觉还是jQuery做起来效果更好.jQuery制作导航下拉菜单,需要用到jQuery方 ...
前端的小玩意（5）——用dojo写的二级下拉菜单自动添加功能
先上DEMO, 虽然丑,那是因为零级按钮的界面太丑了,图标也丑┑(￣Д ￣)┍ 这两个优化后会好很多,毕竟美观不是我的特长嘛 DEMO链接: http://download.csdn.net/deta ...

用Javascrip写出selelct下拉菜单效果

用Javascrip写出selelct下拉菜单效果

用Javascrip写出selelct下拉菜单效果相关推荐

最新文章

热门文章