leihope_ 2015-05-27 12:59 采纳率: 0%
浏览 3771

JS下拉菜单,如何把mouseover变成mouseclick事件

function initMenu() {

assembleMenu(document.getElementById("navigation"));

}

function assembleMenu(uLParentNode) {  
     var theUL = uLParentNode.getElementsByTagName("ul")[0];  //在取得id为navigation的元素后,通过getElementsByTagName("ul")取得其下所有的UL元素。该函数所返回的列表包含了所有嵌套的多级的UL元素,但我们只关心第一个,因此,通过下标访问符[0]返回第一个UL元素,并存放于theUL变量中。
     var theULChilds = theUL.childNodes;  //取得theUL的所有子节点。在DOM2中,childNodes是节点是一个属性,它返回相应对象的下一级的所有子节点。与getElementsByTagName不同的地方是,它只返回紧邻下一级的所有子节点。

     for (var i=0; i<theULChilds.length; i++) {  //开始遍历所返回的子节点。
        if (theULChilds[i].tagName == "LI") { //我们只关心LI节点,因此,对于不同浏览器的返回结果,此行可统一地过滤掉其他类型的子节点。 
             var theLINode = theULChilds[i];  
            if (hasNextLevelMenu(theLINode)) {  
                setMouseActions(theLINode);  
                theLINode.firstChild.className = uLParentNode.tagName == "DIV" ? "downMenu" : "rightMenu";  
                assembleMenu(theLINode);  //如果有下级菜单,则将LI节点下第一个子节点的className属性设为downMenu。而LI节点的第一个子节点正好是A标签:
            }  
         }  
     }  

    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= "#FFF";  
       };  

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

}

  • 写回答

1条回答 默认 最新

  • danielinbiti 2015-05-27 13:32
    关注
    如果其他逻辑都没问题,那就把下面改一下就行了
    node.onmouseover = function() {  
                this.getElementsByTagName("ul")[0].style.display = "block";  
                this.firstChild.style.backgroundColor= "#FFF";  
           };  
        改成
     node.onclick= function() {  
                this.getElementsByTagName("ul")[0].style.display = "block";  
                this.firstChild.style.backgroundColor= "#FFF";  
           };  
    
    评论

报告相同问题?

悬赏问题

  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波
  • ¥15 针对曲面部件的制孔路径规划,大家有什么思路吗
  • ¥15 钢筋实图交点识别,机器视觉代码
  • ¥15 如何在Linux系统中,但是在window系统上idea里面可以正常运行?(相关搜索:jar包)
  • ¥50 400g qsfp 光模块iphy方案
  • ¥15 两块ADC0804用proteus仿真时,出现异常
  • ¥15 关于风控系统,如何去选择
  • ¥15 这款软件是什么?需要能满足我的需求
  • ¥15 SpringSecurityOauth2登陆前后request不一致