使用css+js实现select横向显示子菜单

时间 2019-12-05

标签使用 css+js css 实现 select 横向显示菜单栏目 CSS 繁體版

原文原文链接

效果

思路

用<ul>标签模拟,js和css处理显示和赋值javascript

实现

html 部分

<input id="groupBtn" type="button" value="A集团"/>
 <ul id="groupName">
	<li><a href="javascript:;">A集团</a></li>
	<li><a href="javascript:;">B集团</a></li>
	<li><a href="javascript:;">C集团</a></li>
	<li><a href="javascript:;">D集团</a></li>
 </ul>
复制代码

CSS 部分

#groupName{
   	margin-left:100px;
   	list-style:none; //去除列表项的样式
   	width:350px;
   	display:none;  //默认隐藏
   }
#groupBtn{
   	margin:10px 0 0 100px;
   	border:none;	//去除按钮的默认样式
   	outline:none; //同上
   	background:#fff;
   	font-size:20;
   }
   ul li {
   	float: left;  //横向排列
   	text-align:center
     }
   li a{
   	display:inline-block;
   	width:80px;
   	height:30px;
   	text-decoration:none; //去除<a/>标签的下划线
   	color:#000;
   }
   li a:hover{
   	background-color:#dfdfdf; //鼠标靠近选择背景变色
   }
   
复制代码

JavaScript 部分

var groupBtn=document.getElementById('groupBtn');
	var groupName=document.getElementById('groupName');
	var groupNames=groupName.children;
	groupBtn.onfocus=function(){
		groupName.style.display='block';
	}
	groupBtn.onblur=function(){
		setTimeout(function(){
			groupName.style.display='none';
		},200)
	}
	//模拟option点击事件
	for(var i=0;i<groupNames.length;i++){
		groupNames[i].onclick=function(){
			groupBtn.value=this.innerText;
		}
	}
复制代码

可直接运行 HTML Demo

<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
	#groupName{
		margin-left:100px;
		list-style:none;
		width:350px;
		display:none;
	}
	#groupBtn{
		margin:10px 0 0 100px;
		border:none;
		outline:none;
		background:#fff;
		font-size:20;
	}
	ul li {
		float: left;
		text-align:center
	}
	li a{
		display:inline-block;
		width:80px;
		height:30px;
		text-decoration:none;
		color:#000;
	}
	li a:hover{
		background-color:#dfdfdf;
	}
  </style>
 </head>
 <body>
 <input id="groupBtn" type="button" value="A集团"/>
 <ul id="groupName">
	<li><a href="javascript:;">A集团</a></li>
	<li><a href="javascript:;">B集团</a></li>
	<li><a href="javascript:;">C集团</a></li>
	<li><a href="javascript:;">D集团</a></li>
 </ul>
  <script type="text/javascript">
	var groupBtn=document.getElementById('groupBtn');
	var groupName=document.getElementById('groupName');
	var groupNames=groupName.children;
	groupBtn.onfocus=function(){
		groupName.style.display='block';
	}
	groupBtn.onblur=function(){
		setTimeout(function(){
			groupName.style.display='none';
		},200)
		
	}
	//模拟option点击事件
	for(var i=0;i<groupNames.length;i++){
		groupNames[i].onclick=function(){
			groupBtn.value=this.innerText;
		}
	}
  </script>
 </body>
</html>
复制代码