使用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>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。