<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>切换菜单</title>
<link rel="stylesheet" type="text/css" href="11.css"/>
<script src="11.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>
<p id='pid'>请选择分类</p>
<span class="img" id="img"></span>
<ul class="dis" id="ul">
<li>ASP开发</li>
<li>.NET开发</li>
<li>PHP开发</li>
<li>Javascript开发</li>
<li>Java特效</li>
</ul>
</div>
</body>
</html>*{
margin: 0;
padding: 0;
}
div{
width: 300px;
margin: 3em auto;
text-align: center;
}
p{
border: 2px solid lightsteelblue;
width: 300px;
height: 1.2em;
line-height: 1.2em;
}
ul{
list-style: none;
border: 2px solid lightsteelblue;
border-top: none;
width: 300px;
height: 6em;
line-height: 1.2em;
}
.dis{
display: none;
}
.di{
display: block;
}
.img{
display: block;
border: 2px solid lightsteelblue;
height:1.2em;
width: 1em;
position: absolute;
top: 3em;
background: url(imgs/ptlogin.png) no-repeat top -1em left 5px;
cursor: pointer;
}window.onload=function(){
aa()
};
function aa(){
var span=document.getElementById('img');
var ul=document.getElementById('ul');
span.onclick=open;
document.onclick=clear;
li=ul.childNodes;
for(var i=0;i<li.length;i++){
li[i].onmouseover=show;
li[i].onmouseout=hide;
li[i].onclick=replace;
}
document.onkeydown=show_1;
}
function open(event){
event.stopPropagation();
ul.className='di';
}
function clear(){
ul.className='dis';
}
function show(){
this.style.backgroundColor='gray';
}
function show_1(event){
if(event.keyCode===13){
clear();
}
if(event.keyCode===40){
li[0].style.backgroundColor='gray';
}
if(event.keyCode===38){
}
}
function hide(){
this.style.backgroundColor='white';
}
function replace(){
pid=document.getElementById('pid');
pid.innerHTML=this.innerHTML;
}测试按键的时候li[0]为什么都无法读取有没有一种好的方法可以更改this指向
3 回答
已采纳
zhangyudemuke
TA贡献26条经验 获得超6个赞
由于编写代码的时候有换行产生空节点，如果确定其他地方没有问题的话对代码进行压缩删除空文本节点，这样做的风险比较大，适合大神，麻烦一点的方法是对第一个节点进行验证，
if(ul.childNodes[0].nodeType == 3 && ul.childNodes[0].nodeValue == ""){continue;}
将这个代码放在for循环中试试看。
点击展开后面1条
添加回答
举报
0/150
提交
取消