您的位置：首页 > Web前端 > JavaScript
二、JavaScript语言--事件处理--DOM事件探秘--下拉菜单

2015-10-19 09:53 567 查看
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>
<!doctype html>
<html lang="en">

<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">
window.onload = function() {
var box = document.getElementById('divselect'),
title = box.getElementsByTagName('cite')[0],
menu = box.getElementsByTagName('ul')[0],
as = box.getElementsByTagName('a'),
index = -1;

// 点击三角时
title.onclick = function(event) {
event = event || window.event;
menu.style.display = 'block';
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
document.onkeyup = function(event) {
event = event || window.event;
if (event.keyCode == 40) {
index++;
if (index >= as.length) index = 0;
for (var i = 0; i < as.length; i++) {
as[i].style.background = '#fff';
}
as[index].style.background = '#ccc';
}
if (event.keyCode == 38) {
index--;
if (index < 0) index = as.length - 1;
for (var i = 0; i < as.length; i++) {
as[i].style.background = '#fff';
}
as[index].style.background = '#ccc';
}
if (event.keyCode == 13) {
for (var i = 0; i < as.length; i++) {
as[i].style.background = '#fff';
}
title.innerHTML = as[index].innerHTML;
menu.style.display = 'none';
}
}
}

// 滑过滑过、离开、点击每个选项时
for (var i = 0; i < as.length; i++) {
as[i].num = i
as[i].onmouseover = function() {
this.style.background = '#ccc'
index = as[i].num - 1;
}
as[i].onmouseout = function() {
this.style.background = '#fff'
}
as[i].onclick = function(event) {
event = event || window.event;
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
menu.style.display = 'none';
title.innerHTML = this.innerHTML;
}
}

// 点击页面空白处时
document.onclick = function() {
menu.style.display = 'none';
}
}
</script>
</head>

<body>
<div id="divselect">
<cite>请选择分类</cite>
<ul>
<li id="li"><a href="javascript:;" selectid="1">ASP开发</a></li>
<li><a href="javascript:;" selectid="2">.NET开发</a></li>
<li><a href="javascript:;" selectid="3">PHP开发</a></li>
<li><a href="javascript:;" selectid="4">Javascript开发</a></li>
<li><a href="javascript:;" selectid="5">Java特效</a></li>
</ul>
</div>
</body>

</html>
</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航