| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 376 人关注过本帖
标题:【求助】javascript 写一段代码在FF浏览器中不支持,什么原因
只看楼主 加入收藏
用户名9
Rank: 1
等 级:新手上路
帖 子:1
专家分:0
注 册:2011-6-29
结帖率:0
收藏
已结贴  问题点数:0 回复次数:1 
【求助】javascript 写一段代码在FF浏览器中不支持,什么原因
自己利用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>
搜索更多相关主题的帖子: javascript 浏览器 navigation function 
2011-06-29 09:10
jasonjs
Rank: 2
等 级:论坛游民
帖 子:5
专家分:30
注 册:2011-6-28
收藏
得分:20 
仔细的阅读了你的程序,你的程序主要错误在于你将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;}


2011-06-29 14:12
快速回复:【求助】javascript 写一段代码在FF浏览器中不支持,什么原因
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.034691 second(s), 9 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved