javascript事件注册显示弹出菜单问题


subli[count].onmouseover=new Function("showmenu("+hsubmenu+")");
            subul[count].onmouseover=new Function("showmenu("+hsubmenu+")");
            subul[count].onmouseout=new Function("hidemenu("+hsubmenu+")");

解决方案 »

  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>
        <title>Untitled Page</title>
        <style type="text/css">
            * { padding: 0; margin: 0; }
            #nav { list-style-type: none; width: 100%; }
            #nav li { list-style-type: none; float: left; margin-left: 1em; position: static; }
            #nav a { display: block; float: left; border: solid 1px #ccc; padding-left: 1em; padding-right: 1em; }
            #nav li ul { list-style-type: none; margin-top: 30px; position: absolute; display: none; }
            #nav li ul li { list-style-type: none; float: left; }
        </style>    <script type="text/javascript">
        <!--
        window.onload=showdefault;
        
        function showdefault()
        {
            var navbar=document.getElementById("nav");
            var navul=navbar.getElementsByTagName("ul");
            var defaultnav=navul[0];
            defaultnav.style.display="block";
            regevent();
        }
        
        function regevent()
        {
            var submenu=document.getElementById("nav");
            var subli=submenu.getElementsByTagName("li");//你这里有问题吧，这样获取的话连你子菜单的li一起获取了....
            var subul=submenu.getElementsByTagName("ul");
            var child=submenu.firstChild;
            if(child.nodeType==1)//for ie,if brower is firefox,this node is space,because in firefox space is a child node too.
            {
              child.onmouseover=showmenu;
              child.onmouseout=hidemenu;
            }
            while(child=child.nextSibling)
            {
              if(child.nodeType==3)continue;//for firefox
              child.onmouseover=showmenu;
              child.onmouseout=hidemenu;
            }
          /*  var hsubmenu,hmenu;
            for(var count=0; count<subli.length; count++)
            {
                hsubmenu=subul[count];
                subli[count].onmouseover=function(){showmenu(hsubmenu);}
                subul[count].onmouseover=function(){showmenu(hsubmenu);}
                subul[count].onmouseout=function(){hidemenu(hsubmenu);}
            }*/
        }
        
        function showmenu()
        {
            var objmenu=this.getElementsByTagName("ul")[0];
            objmenu.style.display="block";
        }
        function hidemenu()
        { 
            var objmenu=this.getElementsByTagName("ul")[0];
            objmenu.style.display="none";
        }
        //-->
        </script></head>
    <body>
        <ul id="nav">
            <li><a>Menu1</a><ul>
                <li><a>SubMenu1</a></li>
                <li><a>SubMenu1</a></li>
                <li><a>SubMenu1</a></li>
            </ul>
            </li>
            <li><a>Menu2</a><ul>
                <li><a>SubMenu2</a></li>
                <li><a>SubMenu2</a></li>
                <li><a>SubMenu2</a></li>
            </ul>
            </li>
            <li><a>Menu3</a><ul>
                <li><a>SubMenu3</a></li>
                <li><a>SubMenu3</a></li>
                <li><a>SubMenu3</a></li>
            </ul>
            </li>
            <li><a>Menu4</a><ul>
                <li><a>SubMenu4</a></li>
                <li><a>SubMenu4</a></li>
                <li><a>SubMenu4</a></li>
            </ul>
            </li>
            <li><a>Menu5</a><ul>
                <li><a>SubMenu5</a></li>
                <li><a>SubMenu5</a></li>
                <li><a>SubMenu5</a></li>
            </ul>
            </li>
        </ul>
    </body>
    </html>