既然聲明為html5,那么ie9以下就不作考慮了。
<!doctype html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>下拉菜單</title>
<style type="text/css">
body,ul,li{ margin:0; padding:0; font-size:13px;}
ul,li{list-style:none;}
#divselect{width:186px; margin:80px auto; position:relative; z-index:10000;}
#divselect cite{width:150px; height:24px;line-height:24px; display:block; color:#807a62; cursor:pointer;font-style:normal;
padding-left:4px; padding-right:30px; border:1px solid #333333;?
background:url(xjt.png) no-repeat right center;}
#divselect ul{width:184px;border:1px solid #333333; background-color:#ffffff; position:absolute; z-index:20000; margin-top:-1px; display:none;}
#divselect ul li{height:24px; line-height:24px;}
#divselect ul li a{display:block; height:24px; color:#333333; text-decoration:none; padding-left:10px; padding-right:10px;}
</style>
? ?<script type="text/javascript">
/**
? ? ? ?* ?下拉菜單
? ? ? ?* ?@param {string} id 節(jié)點(diǎn)ID
? ? ? ?*/
? ? ? function Selecter (id) {
? ? ? ? ? var parent = document.getElementById(id),
? ? ? ? ? ? ? nodes = parent.children;
? ? ? ? ? this.parent = parent;
? ? ? ? ? this.title = nodes[0];
? ? ? ? ? this.menu = nodes[1];
? ? ? ? ? this.init();
? ? ? }
? ? ? /**
? ? ? ?* 初始化
? ? ? ?*/
? ? ? Selecter.prototype.init = function(){
? ? ? ? var doc = document;
? ? ? ? this.selected = null;
? ? ? ? this.maxLen = this.menu.children.length;
? ? ? ? doc.addEventListener('click',this,false);
? ? ? ? doc.addEventListener('keydown',this,false);
? ? ? ? this.menu.addEventListener('mouseover',this,false);
? ? ? ? this.menu.addEventListener('mouseout',this,false);
? ? ? }
? ? ? /**
? ? ? ?* 事件處理
? ? ? ?*/
? ? ? Selecter.prototype.handleEvent = function(event){
? ? ? ? var target = event.target || event.srcElement;
? ? ? ? switch(target.nodeName){
? ? ? ? ? //點(diǎn)擊三角時(shí)
? ? ? ? ? case 'CITE':
? ? ? ? ? ? this.menuShow();
? ? ? ? ? ? break;
? ? ? ? ? ?// 滑過滑過、離開、點(diǎn)擊每個(gè)選項(xiàng)時(shí)
? ? ? ? ? case 'A':
? ? ? ? ? ? this.removeLight();
? ? ? ? ? ? this.selected = target;
? ? ? ? ? ? this.menuUpdate();
? ? ? ? ? ? this.hightLight();
? ? ? ? ? ? if(event.type=='click'){
? ? ? ? ? ? ? this.menuHide();
? ? ? ? ? ? }
? ? ? ? ? ? break;
? ? ? ? ? ? // 點(diǎn)擊頁面空白處時(shí)
? ? ? ? ? case 'HTML':
? ? ? ? ? ? this.menuHide();
? ? ? ? ? ? break;
? ? ? ? ? //鍵盤操作
? ? ? ? ? default:
? ? ? ? ? ? this.keydown(event.keyCode);
? ? ? ? ? ? break;
? ? ? ? }
? ? ? ? return
? ? ? }
? ? ? /**
? ? ? ?* ?更新菜單值
? ? ? ?*/
? ? ? Selecter.prototype.menuUpdate = function(){
? ? ? ? this.title.innerHTML = this.selected.innerHTML;
? ? ? }
? ? ? /**
? ? ? ?* 高亮選中項(xiàng)
? ? ? ?*/
? ? ? Selecter.prototype.hightLight = function(){
? ? ? ? if(this.selected){
? ? ? ? ? this.selected.style.backgroundColor = 'gray';
? ? ? ? }
? ? ? }
? ? ? /**
? ? ? ?* 移除高亮
? ? ? ?*/
? ? ? Selecter.prototype.removeLight = function(){
? ? ? ? if(this.selected){
? ? ? ? ? this.selected.style.backgroundColor = 'white';
? ? ? ? }
? ? ? }
? ? ? /**
? ? ? ?* 顯示菜單項(xiàng)
? ? ? ?*/ ? ? ?
? ? ? Selecter.prototype.menuShow = function(){
? ? ? ? this.menu.style.display = 'block';
? ? ? ? this.hightLight();
? ? ? }
? ? ? /**
? ? ? ?* 隱藏菜單項(xiàng)
? ? ? ?*/
? ? ? Selecter.prototype.menuHide = function(){
? ? ? ? this.menu.style.display = 'none';
? ? ? }
? ? ? /**
? ? ? ?* 取下一項(xiàng)
? ? ? ?*/
? ? ? Selecter.prototype.next= function(){
? ? ? ? var target = this.selected;
? ? ? ? var index = target ? target.getAttribute('selectid')-1 : -1;
? ? ? ? this.removeLight();
? ? ? ? index = ++index % this.maxLen;
? ? ? ? this.selected = this.menu.children[index].children[0];
? ? ? ? this.hightLight(); ??
? ? ? }
? ? ? /**
? ? ? ?* 取上一項(xiàng)
? ? ? ?*/
? ? ? Selecter.prototype.prev = function(){
? ? ? ? var target = this.selected;
? ? ? ? var index = target ? target.getAttribute('selectid')-1 : 1;
? ? ? ? this.removeLight();
? ? ? ? index = --index < 0 ? 0 : index;
? ? ? ? this.selected = this.menu.children[index].children[0];
? ? ? ? this.hightLight();
? ? ? }
? ? ? /**
? ? ? ?* ?鍵盤操作
? ? ? ?* @param {number} code ASSIC碼
? ? ? ?*/
? ? ? Selecter.prototype.keydown = function(code){
? ? ? ? switch(code){
? ? ? ? ? case 40: //down
? ? ? ? ? ? this.next();
? ? ? ? ? ? break;
? ? ? ? ? case 38://up
? ? ? ? ? ? this.prev();
? ? ? ? ? ? break;
? ? ? ? ? case 13:
? ? ? ? ? ? this.menuUpdate();
? ? ? ? ? ? this.menuHide();
? ? ? ? ? ? break;
? ? ? ? ? default:
? ? ? ? ? ? break;
? ? ? ? }
? ? ? }
? window.onload=function(){
? ? var menu = new Selecter('divselect');
? }
? ?</script>
</head>
<body>
<div id="divselect">
? ? ? <cite>請選擇分類</cite>
? ? ? <ul>
? ? ? ? ?<li id="li"><a href="javascript:;" selectid="1">ASP開發(fā)</a></li>
? ? ? ? ?<li><a href="javascript:;" selectid="2">.NET開發(fā)</a></li>
? ? ? ? ?<li><a href="javascript:;" selectid="3">PHP開發(fā)</a></li>
? ? ? ? ?<li><a href="javascript:;" selectid="4">Javascript開發(fā)</a></li>
? ? ? ? ?<li><a href="javascript:;" selectid="5">Java特效</a></li>
? ? ? </ul>
? ? </div>
</body>
</html>
