注册 登录
编程论坛 JavaScript论坛

【求助】javascript 写一段代码在FF浏览器中不支持,什么原因

用户名9 发布于 2011-06-29 09:10, 376 次点击
自己利用DIV+CSS+JS写了一段下拉菜单导航栏,在IE中正常,但在FF中,无下拉,怀疑是JS问题,请高人指点下:
js部分:
        window.onload = initMenu;
function initMenu() {
    assembleMenu(document.getElementById("navigation"));
}
function assembleMenu(uLParentNode) {
    var theUL = uLParentNode.getElementsByTagName("ul")[0];
    var theULChilds = theUL.childNodes;

    for (var i=0; i<theULChilds.length; i++) {
        if (theULChilds[i].tagName == "LI") {
            var theLINode = theULChilds[i];
            if (hasNextLevelMenu(theLINode)) {
                setMouseActions(theLINode);
                assembleMenu(theLINode);
             }
         }
     }

    function hasNextLevelMenu(node) {
        return node.getElementsByTagName("ul").length > 0;
    }

    function setMouseActions(node) {
        node.onmouseover = function() {
            this.getElementsByTagName("ul")[0].style.display = "block";
            this.firstChild.style.backgroundColor= "#B33831";
        };

        node.onmouseout = function() {
            this.getElementsByTagName("ul")[0].style.display = "none";
            this.firstChild.style.backgroundColor= "#A3322D";
        };
    }
}

CSS部分:
#navigation{margin:5px auto 0px;background-color:#FFF999; height:24px; width:960px;}
#navigation ul{margin:0;padding:0;}
#navigation ul li{position: relative; list-style-type:none;float:left;width: 90px; font-weight:bold;}
#navigation ul li ul{position: absolute; display:none; border-bottom:1px solid #000;}
#navigation ul li ul li {background:#AEAEAE; text-align:left;}
#navigation ul li a {text-decoration: none;color:#FFF;display: block;padding:5px;}
#navigation ul li a:hover {color:#FFF;}
#navigation ul li ul li a{text-decoration: none; color:#FFF; display: block; }
#navigation ul li ul li a:hover{color:black; }

网页部分:
<div id="navigation">
    <ul>
        <li><a href="">首页</a></li>        
        <li><a href="">新闻资讯</a></li>
            <ul>
                <li><a href="">国内新闻</a></li>
                <li><a href="">国际新闻</a></li>
                <li><a href="">社会热点</a></li>
                <li><a href="">时事评论</a></li>
            </ul>            
        <li><a href="">影视娱乐</a></li>
            <ul>
                <li><a href="">电视前沿</a></li>
                <li><a href="">电影快报</a></li>
                <li><a href="">影视明星</a></li>
            </ul>
1 回复
#2
jasonjs2011-06-29 14:12
仔细的阅读了你的程序,你的程序主要错误在于你将html部分的嵌套部分的<ul/>标签当成了<li/>标签的子元素,其实则不然。这就造成了,你写js及css的错误,如下已部分列出。主要说js错误:由于嵌套的<ul/>不是<li/>标签的子元素,造成node.getElementsByTagName("ul")取不到值,所以造成与node.getElementsByTagName("ul")相关的一些列代码错误。解决办法:因该取<li/>的nextSibling兄弟节点。
js部分:
    function hasNextLevelMenu(node) {
        return node.getElementsByTagName("ul").length > 0;
    }
node.onmouseover = function() {
            this.getElementsByTagName("ul")[0].style.display = "block";
            this.firstChild.style.backgroundColor= "#B33831";
        };
CSS部分:
#navigation ul li{position: relative; list-style-type:none;float:left;width: 90px; font-weight:bold;}
#navigation ul li ul{position: absolute; display:none; border-bottom:1px solid #000;}
#navigation ul li ul li {background:#AEAEAE; text-align:left;}


1