精华内容
下载资源
问答
  • JS模拟select下拉菜单

    2019-10-29 23:38:19
    JS模拟select下拉菜单
  • 公司最近一个项目中,出现了一个非window主题外观的下拉菜单,于是自己搞了个。
  • js模拟下拉菜单

    2019-01-07 21:35:25
    JavaScript模拟下拉菜单 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <...

    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>
    

    有任何错误,敬请指教!

    展开全文
  • js实现树型下拉菜单

    2016-11-07 22:58:12
    js实现树型下拉菜单
  • js模拟下拉菜单

    2019-10-15 09:29:34
    我们在网站上看到的下拉菜单,有些是通过js模拟的,那么怎么模拟呢,可以借鉴一下以下思路: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> ...

    我们在网站上看到的下拉菜单,有些是通过js来模拟的,那么怎么模拟呢,可以借鉴一下以下思路:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			.cont{width:200px;height:40px;margin: 30px auto;}
    			.cont span{height:40px;line-height:40px;display: block;border: solid 1px black;}
    			.cont ul{margin: 0;padding:0;list-style: none;border: solid 1px black;display: none;}
    			.cont li{line-height: 30px;padding: 0 8px}
    			.cont li.active{background: dodgerblue;color: #fff;}
    		</style>
    	</head>
    	<body>
    		<select>
    			<option value="html5">html5</option>
    			<option value="python">python</option>
    			<option value="java">java</option>
    			<option value="UI">UI</option>
    		</select>
    		<div class="cont">
    			<span></span>
    			<ul class="list">
    				<li>html5</li>
    				<li>python</li>
    				<li>java</li>
    				<li>UI</li>
    			</ul>
    		</div>
    	</body>
    	<script type="text/javascript">
    //		设置当前li具有active的class的功能
    		function setActive(){
    			for(var j=0;j<ali.length;j++){
    				ali[j].className = "";
    			}
    			ali[index].className = "active";
    		}
    		
    		
    		var ospan = document.querySelector(".cont span");
    		var oul = document.querySelector(".cont ul");
    		var ali = oul.children;
    //		默认显示第几项
    		var index = 0;
    //		根据默认显示的项,设置颜色
    		ali[index].className = "active";
    //		根据默认显示的项设置内容
    		ospan.innerHTML = ali[index].innerHTML;
    		
    //		1.显示和隐藏:一定要根据状态去判断
    		var onoff = 0;
    		ospan.onclick = function(eve){
    			console.log(onoff);
    			
    			var e = eve || window.event;
    			if(onoff == 0){
    				oul.style.display = "block";
    				
    //				每次显示之前,要设置默认项
    				setActive();
    				
    				onoff = 1;
    			}else{
    				oul.style.display = "none";
    				onoff = 0;
    			}
    			
    			e.stopPropagation();
    		}
    		document.onclick = function(){
    			oul.style.display = "none";
    			onoff = 0;
    		}
    		
    //		2.鼠标经过li有效果
    		for(var i=0;i<ali.length;i++){
    			
    			ali[i].index = i;
    			
    			ali[i].onmouseover = function(){
    //				K5.在鼠标进入li时修改全局的index,这样做的目的是为了让键盘和鼠标联动
    				index = this.index;
    				setActive();
    				
    //				ali[index] === this
    			}
    			ali[i].onclick = function(){
    				ospan.innerHTML = this.innerHTML;
    				index = this.index;
    			}
    		}
    		
    //		3.键盘操作下拉选项
    		document.onkeydown = function(eve){
    //			K1.判断下拉菜单是否显示,没显示,不执行
    			if(oul.style.display === "none") return;
    			var e = eve || window.event;
    			var code = e.keyCode || e.which;
    //			K2.绑定上下键的事件
    			if(code == 38){
    //				K3.计算索引
    				if(index == 0){
    					index = 0;
    				}else{
    					index--;
    				}
    //				K4.根据索引显示内容
    				setActive();
    				ospan.innerHTML = ali[index].innerHTML;
    			}
    			if(code == 40){
    				if(index == ali.length-1){
    					index = ali.length-1
    				}else{
    					index++;
    				}
    				setActive();
    				ospan.innerHTML = ali[index].innerHTML;
    			}
    //			K6.回车事件
    			if(code == 13){
    //				K7.回车隐藏,并修改显示和修改的状态
    				ospan.innerHTML = ali[index].innerHTML;
    				oul.style.display = "none";
    				onoff = 0;
    			}
    		}
    		
    		
    	</script>
    </html>
    

    这是运行结果:

    展开全文
  • js模拟下拉菜单 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{width:200px;height:30px;line-height...

    js模拟下拉菜单

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			.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;}
    			.box ul li{padding-left: 5px;}
    			.active{background: #35f;color: #fff;}
    		</style>
    	</head>
    	<body>
    	<div class="box">
            <span>北京</span>
            <ul style="display: none">
                <li class="active">北京</li>
                <li>上海</li>
                <li>广州</li>
                <li>深圳</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=document.querySelectorAll(".box ul li");
    	   //用i数值来设置ul的显示或隐藏,0为显示,1为隐藏
    	   var i=0;
    	   // var index=0;//设置默认索引值
    	   var cssIndex=0;
    	   var htmlIndex=0;//设置鼠标滑过和鼠标按下的初始值
    	   //把span标签的内容改为数组ali中索引为index的内容
    	   ospan.innerHTML=ali[htmlIndex].innerHTML;
    	   setActive(cssIndex);//调用函数setActi(在文末)
    	   
    	   // 绑定鼠标事件::
    	   ospan.onclick=function(eve){
    		   //绑定ospan点击事件
    		   var e= eve||window.event;
    		   //处理事件源的兼容问题
    		   e.cancelBubble = true;// 阻止事件冒泡
    		   if(i==0){
    			   oul.style.display="block";
    			   i=1;//当i为1时,ul则隐藏,i设置为1
    			   setActive(htmlIndex);//调用函数setActive(在文末)
    		       cssIndex=htmlIndex;
    		   }//当i为0时,ul则显示,i设置为0
    		   else{
    			    oul.style.display="none";
    				i=0;
    		   }
    	   }//点击空白隐藏功能,同时修改状态
    	   document.onclick=function(){
    		   oul.style.display="none";
    		   i=0;
    	   }
    	   //鼠标经过
    	  for(var j=0;j<ali.length;j++){
    		  //遍历数组
    		  ali[j].index=j;
    		  //提前给li绑定索引,方便后面设置索引
    		  ali[j].onmouseover=function(){
    			  cssIndex=this.index;
    			  //绑定鼠标在li上移动事件
    			  for(var k=0;k<ali.length;k++){
    				  // 取消所有li的className
    				  ali[k].className="";
    			  }
    			  //设置当前的li的className为"active",从而获得css中.active的样式
    			  this.className="active";
    		  }
    		  ali[j].onclick=function(){
    			  //绑定点击li的鼠标事件
    			  ospan.innerHTML=this.innerHTML;
    			  //把span标签的内容改为当前li的内容
    			  htmlIndex=this.index;
    			  //把默认索引改为当前li的索引,从而使点击li后关闭下拉菜单,span标签内容变成当前内容
    		  }
    	  }
    	
    	// 绑定键盘事件::
    	document.onkeydown=function(eve){
    		var e=eve||window.event;
    		var code=e.keyCode||e.which;
    		if(i==0) return;//当ul没有显示时,不能够生效键盘事件
    		//如果下拉菜单未打开(ul为隐藏状态),则不执行
    		if(e.keyCode==38){
    			//在键盘上按上键
    			htmlIndex=cssIndex;
    			if(htmlIndex==0){
    				htmlIndex=0;
    				cssIndex=0;
    			}else{
    				//如果索引为0时,则索引一直为0(索引为0时,即此时li以及为第一个,所以不能再减了
    				htmlIndex--;
    				cssIndex--;
    			}
    			//如果索引为ali.length-1(数组最后一位)时,则索引一直为ali.length-1;否则索引自增1		
    			setActive(htmlIndex);
    			ospan.innerHTML=ali[cssIndex].innerHTML;
    			//把span标签的内容改为数组ali中索引为index的内容
    		}
    		if(e.keyCode==40){
    			//按下键
    			htmlIndex=cssIndex;
    			if(htmlIndex == ali.length-1){
    				htmlIndex = ali.length-1;
    				cssIndex = ali.length-1;
    			}
    			else{
    				htmlIndex++;
    				cssIndex++;
    			}
    			setActive(cssIndex);//修改li中的当前项;
    			 ospan.innerHTML=ali[htmlIndex].innerHTML;
    		}
    		//按回车键,隐藏ul,设置i=0
    		if(e.keyCode==13){
    			// K8.回车隐藏下拉菜单,同时设置状态
    			oul.style.display="none";
    			i=0;
    			//ospan.innerHTML=ali[index].innerHTML;
    	}
    	}
    	
    	//功能型函数:根据索引设置当前项
    		function setActive(idx){
    			for(var k=0;k<ali.length;k++){
    				//遍历数组
    				ali[k].className = "";
    				// 取消所有li的className
    			}
    			ali[idx].className = "active";
    			//设置ali数组中索引为index的li的className为"active",从而获得css中.active的样式
    		}
    	</script>
    </html>
    
    展开全文
  • 主要介绍了js+CSS模拟select控件下拉菜单效果,通过javascript鼠标事件结合css控制实现select下拉菜单效果,整体效果华丽美观,需要的朋友可以参考下
  • js模拟点击select下拉菜单列表代码 js模拟点击select下拉菜单列表代码 js模拟点击select下拉菜单列表代码 js模拟点击select下拉菜单列表代码
  • 本文实例讲述了JS模拟bootstrap下拉菜单效果。分享给大家供大家参考,具体如下: 模拟bootstrap下拉菜单 在工作中要切一个效果:点击导航栏,则出现下列菜单,但是当点击其他地方的时候,就隐藏子菜单,效果有点类似...
  • 以下代码实现了下拉菜单的所有功能,既可以鼠标操作也可以通过键盘实现上下选择,基本效果如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=...

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

    <!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>
    
    展开全文
  • 使用js模拟下拉菜单 我们都知道HTML的原生下拉菜单的样式很单一,不美观,且有些样式难以修改,我们可以通过js模拟一个下拉菜单,这样就会比较方便操作它的样式了。 这里我们使用ul来模拟下拉框: <div class=...
  • 摘要:脚本资源,Ajax/JavaScript,select控件,下拉框美化 Js模拟select控件,实际上可以当作下拉框来用,制作的精美漂亮,我喜欢,相信大家也会喜欢的,稍加修改,就可以变为一个漂亮的下拉菜单啦。
  • 最近在搞一个需求:搜索框,输入时显示联想词下拉列表,当点击联想词跳转到搜索页,如果点击其他部分收起联想的下拉列表。接到需求后第一反应用失焦(blur)去做收起操作避免body的监控,随后就踩坑里了,下面情景...
  • js模拟select</title> </head> <style> *{ margin:0; padding:0;} li{ list-style:none;} body{ font:12px “宋体”; color:#666;} .select_down{ margin:100px auto; positio
  • <!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-...
  • css模拟下拉菜单

    2019-05-27 21:56:07
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css模拟下拉菜单</title> <style> * { padding: 0; m...
  • Web的完整工具提示,弹出框,下拉菜单和菜单解决方案 演示和文档 :right_arrow: 安装 包装经理 # npm npm i tippy.js # Yarn yarn add tippy.js 导入tippy构造函数和核心CSS: import tippy from 'tippy.js' ; ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,097
精华内容 3,238
关键字:

js模拟下拉菜单