关于使用setTimeout传递变量

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/oaIndex.css">
</head>
<body>
<div id="siteBox">
  <div id="header">
<div id="navi">
<a href="index.html" title="about us">财务管理</a>
<a href="index.html" title="home">配置管理</a>
</div>
<div id="menu">
<ul id="menu_config">
<li><a href="#">配置管理1</a></li>
<li><a href="#">配置管理2</a></li>
<li><a href="#">配置管理3</a></li>
<li><a href="#">配置管理4</a></li>
<li><a href="#">配置管理5</a></li>
</ul>
<ul id="menu_finance">
<li><a href="#">财务管理1</a></li>
<li><a href="#">财务管理2</a></li>
<li><a href="#">财务管理3</a></li>
<li><a href="#">财务管理4</a></li>
<li><a href="#">财务管理5</a></li>
</ul>
</div>
  </div>
</div>
</body>
<script>
function $ ( objId )
{
return document.getElementById ( objId );
}var menu_ul = $("menu").getElementsByTagName("ul"); 
var navi_a = $("navi").getElementsByTagName("a");  
function   menuFix()
{
    for(var i=0;i <navi_a.length;i++)       
{ 
navi_a[i].onmouseover=function()
{
setTimeout("show_menu("+i+")",200); 
}
navi_a[i].onmouseout=function()   
{
window.loadMenuTimeout = setTimeout("cancel_menu("+i+")",200);
}
menu_ul[i].onmouseover=function()
{
clearTimeout(window.loadMenuTimeout);
setTimeout("show_menu("+i+")",200); 
}
menu_ul[i].onmouseout=function()   
{
setTimeout("cancel_menu("+i+")",200);
}
}
}
function show_menu(i)
{
    menu_ul[i].style.display = 'block';
}
function cancel_menu(i)
{
    menu_ul[i].style.display = 'none';
}window.onload=menuFix;
</script>
</html>希望有人可以帮到我。谢谢

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <body>
    <style type="text/css">
    *{padding:0px; margin:0px;}
    ul{display:none;}
    </style>
    <div id="siteBox">
      <div id="header">
        <div id="navi" style="border:1px solid #000000;"> <a href="index.html" title="about us"> 财务管理 </a> <a href="index.html" title="home"> 配置管理 </a> </div>
        <div id="menu">
          <ul id="menu_config" style="border:1px solid #000000;">
            <li> <a href="#"> 配置管理1 </a> </li>
            <li> <a href="#"> 配置管理2 </a> </li>
            <li> <a href="#"> 配置管理3 </a> </li>
            <li> <a href="#"> 配置管理4 </a> </li>
            <li> <a href="#"> 配置管理5 </a> </li>
          </ul>
          <ul id="menu_finance" style="border:1px solid #000000;">
            <li> <a href="#"> 财务管理1 </a> </li>
            <li> <a href="#"> 财务管理2 </a> </li>
            <li> <a href="#"> 财务管理3 </a> </li>
            <li> <a href="#"> 财务管理4 </a> </li>
            <li> <a href="#"> 财务管理5 </a> </li>
          </ul>
        </div>
      </div>
    </div>
    <script language="javascript">
    function $ (objId) 
    { 
    return document.getElementById (objId); 
    } var menu_ul = $("menu").getElementsByTagName("ul"); 
    var navi_a = $("navi").getElementsByTagName("a"); var old;
    var timer;function menuFix() 
    { 
    for(var i=0, len=navi_a.length;i <len;i++) 
    {
    (function(n){
    var a = navi_a[n];
    var u = menu_ul[n];
    a.onmouseover=function(){
    clearTimeout(timer);
    timer = setTimeout(function(){show(u)},500);
    }
    a.onmouseout=function(){
    clearTimeout(timer);
    timer = setTimeout(function(){hidden(u)},500);
    }

    u.onmouseover=function(){
    clearTimeout(timer);
    timer = setTimeout(function(){show(u)},500);
    }
    u.onmouseout=function(){
    clearTimeout(timer);
    timer = setTimeout(function(){hidden(u)},500);
    }

    })(i);
    } 
    }function hidden(){
    if(old){ old.style.display = 'none'; old = null;}
    }function show(o){
    if(old==o) return;
    hidden();
    old = o;
    o.style.display = 'block';
    }window.onload=menuFix;
    </script>
    </body>
    </html>