javascript - 为什么要点两下才展开
本文介绍了javascript - 为什么要点两下才展开的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html>
<head>
<title>Shakespeare's Plays</title>
<meta charset="utf-8"/>
<style>
body {
background-color: #FFF;
color: #000;
}
div {
margin-bottom: 10px;
}
ul.menu {
display: none;
list-style-type: none;
margin-top: 5px;
}
a.menuLink {
font-size: 16px;
font-weight: bold;
}
</style>
<script>
window.onload=initAll;
function initAll(){
var aLink=document.getElementsByName('menuLink');
for(var i=0;i<aLink.length;i++){
aLink[i].index=i;
aLink[i].onclick=function(){
var aUl=document.getElementsByTagName('ul');
if(aUl[this.index].style.display=='none'){
aUl[this.index].style.display='block';
}
else{
aUl[this.index].style.display='none';
}
return false;
}
}
}
</script>
</head>
<body>
<h1>Shakespeare's Plays</h1>
<div>
<a href="menu1.html" name="menuLink">Comedies</a>
<ul class="menu" id="menu1">
<li><a href="pg1.html">All's Well That Ends Well</a></li>
<li><a href="pg2.html">As You Like It</a></li>
<li><a href="pg3.html">Love's Labour's Lost</a></li>
<li><a href="pg4.html">The Comedy of Errors</a></li>
</ul>
</div>
<div>
<a href="menu2.html" name="menuLink">Tragedies</a>
<ul class="menu" id="menu2">
<li><a href="pg5.html">Anthony & Cleopatra</a></li>
<li><a href="pg6.html">Hamlet</a></li>
<li><a href="pg7.html">Romeo & Juliet</a></li>
</ul>
</div>
<div>
<a href="menu3.html" name="menuLink">Histories</a>
<ul class="menu" id="menu3">
<li><a href="pg8.html">Henry IV, Part 1</a></li>
<li><a href="pg9.html">Henry IV, Part 2</a></li>
</ul>
</div>
</body>
</html>解决方案
这么改一下吧：
window.onload=initAll;
function initAll(){
var aLink=document.getElementsByName('menuLink');
for(var i=0;i<aLink.length;i++){
aLink[i].index=i;
aLink[i].onclick=function(){
var aUl=document.getElementsByTagName('ul');
if(getComputedStyle(aUl[this.index], 'style').display=='none'){
aUl[this.index].style.display='block';
}
else{
aUl[this.index].style.display='none';
}
return false;
}
}
}这篇关于javascript - 为什么要点两下才展开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
