-3
第一次点击后，我的JavaScript的第5行失败。它'会'打开一个subnav，然后当我点击第二个时，第一个会消失。但是，所有这些之后，你点击的每个人都将保持并且不会在没有刷新屏幕的情况下消失。 .style.display =“none”完全无法清除我的ma [m]值，因此当单击另一个值时，我的subnav菜单无法消失。 http://jsfiddle.net/w9ztQ/style.display =“无”失败
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bite Me</title>
<script type="text/javascript">
var ma = ["dropmenu1","dropmenu2","dropmenu3"];
function dropMenu(x){
for (var m in ma){
if(ma[m] != x){
document.getElementById(ma[m]).style.display = "none";
}
}
if(document.getElementById(x).style.display == 'block'){
fadeOut(x);
}else{
fadeIn(x);
}
}
</script>
<script type="text/javascript">
var fade_in_from = 0;
var fade_out_from = 10;
function fadeIn(element){
var target = document.getElementById(element);
target.style.display ="block";
var newSetting = fade_in_from/10;
target.style.opacity = newSetting;
//opacity
fade_in_from++;
if(fade_in_from == 10){
target.style.opacity = 1;
clearTimeout(looTimer);
fade_in_from = 0;
return false;
}
var loopTimer = setTimeout('fadeIn(\''+element+'\')',50);
}
function fadeOut(element){
var target = document.getElementById(element);
var newSetting = fade_out_from/10;
target.style.opacity = newSetting;
fade_out_from--;
if(fade_out_from == 0){
target.style.opacity = 0;
target.style.display = "none";
clearTimeout(loopTimer);
fade_out_from = 10;
return false;
}
var loopTimer = setTimeout('fadeOut(\''+element+'\')',50);
}
</script>
<script type="text/javascript">
var ma = ["dropmenu1","dropmenu2","dropmenu3"];
function dropMenu(x){
for (var m in ma){
if(ma[m] != x){
document.getElementById(ma[m]).style.display = "none";
}
}
if(document.getElementById(x).style.display == 'block'){
fadeOut(x);
}else{
fadeIn(x);
}
}
</script>
<style type="text/css">
body{ margin:0px; }
div#myheader{
height:100px;
background:#D2E9FF;
border-bottom:#09F 1px solid;
}
div#logo{
height:75px;
border:#09F 1px dashed;
font-size:44px;
padding:0px 12px;
}
div#headermenusystem{ margin-left:16px; }
div#headermenusystem > div{ float:left; margin:0px 20px; }
div.dropmenus {
display:none;
position:absolute;
top:100px;
width:120px;
background:#D2E9FF;
z-index:2;
padding:4px;
border:#0385CB 3px solid;
border-top:none;
-moz-border-radius:0px 0px 8px 8px;
border-radius:0px 0px 8px 8px;
}
div.dropmenus > a {
display:block;
margin:4px;
padding:7px;
font-size:14px;
text-decoration:none;
background:#E8E8E8;
border:#666 1px solid;
-moz-border-radius:3px;
border-radius:3px;
color:#000;
}
div.dropmenus > a:hover {
background:#FFF;
border:#06F 1px solid;
color: #06F;
}
div#dropmenu1{left:24px;}
div#dropmenu2{left:116px;}
div#dropmenu3{left:214px;}
div#restofpage{ padding:36px; }
</style>
</head>
<body>
<!-- START HEADER -->
<div id="myheader">
<div id="logo">Test Company</div>
<!-- START MENU SYSTEM -->
<div id="headermenusystem">
<div id="cont1">
<a href="#" onclick="return false;" onmousedown="dropMenu('dropmenu1')">Services</a>
<div id="dropmenu1" class="dropmenus">
<a href="services.php?x=pool">Pool Cleaning</a>
<a href="services.php?x=yard">Yard Work</a>
<a href="services.php?x=pest">Pest Removal</a>
</div>
</div>
<div id="cont2">
<a href="#" onclick="return false;" onmousedown="dropMenu('dropmenu2')">Locations</a>
<div id="dropmenu2" class="dropmenus">
<a href="locations.php?x=Queens">Queens</a>
<a href="locations.php?x=Brooklyn">Brooklyn</a>
<a href="locations.php?x=Bronx">Bronx</a>
</div>
</div>
<div id="cont3">
<a href="#" onclick="return false;" onmousedown="dropMenu('dropmenu3')">Staff</a>
<div id="dropmenu3" class="dropmenus">
<a href="staff.php?x=george">George</a>
<a href="staff.php?x=allen">Allen</a>
<a href="staff.php?x=frank">Frank</a>
</div>
</div>
<div>
<a href="contact.php">Contact Us</a>
</div>
</div>
<!-- END MENU SYSTEM -->
</div>
<!-- END HEADER -->
<div id="restofpage" onmousedown="dropMenu()" style="height:500px;">
<h2>Welcome</h2>
<p>blah...</p>
</div>
</body>
</html>
欢迎来到StackOverflow。请让你删除不必要的代码，只留下必要的位（那些仍然足以重现问题的位）。这样我们就不用挖掘无关的东西了。 – mishik
我真的真的很建议你使用jQuery而不是原生javascript语言。这会节省您的时间，甚至可能会节省您的时间 – Ron
这似乎对我很有用：http://jsfiddle.net/w9ztQ/1/我刚刚将looTimer的引用更改为loopTimer，并在脚本加载时进行了更改。 –