Question

第一次点击后，我的javascript第5行失败了。它将'打开一个subnav然后当我点击第二个，第一个将消失。但是，在此之后，您点击的每一个都将保留，并且不会在没有屏幕刷新的情况下消失。 .style.display =“none”完全无法清除我的ma [m]值，因此当点击另一个值时，我的subnav菜单无法消失。 http://jsfiddle.net/w9ztQ/

<!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>

Answer 1

我发现了两个小虫子。

一个是clearTimeout(looTimer);我认为你的意思是 loopTimer 。

其次，您在脚本中定义了var ma = ["dropmenu1","dropmenu2","dropmenu3"]; 2次。删除我认为它的工作原理。

this (demo) 您期望的行为？

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);
    }
}

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(loopTimer);
        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);
}
//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);
    }
}

style.display =“none”失败

1 个答案: