Javascript body OnClick

我正在学习 Javascript,我正在尝试创建一个简单的下拉菜单.您可以在顶部菜单的Google主页上看到我所需功能的示例,其中包含“更多”和“设置”下拉菜单.具体来说,当您点击菜单时,菜单消失.

在Javascript中的hideMenus函数中需要什么代码,以便在屏幕上的任何位置点击时隐藏可见的uls？

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />  
<title>Untitled 1</title>  

<style type="text/css">  
a  
{  
    color:blue;  
}  

.info ul.submenu  
{  
    border: solid 1px #e0e0e0;  
    background-color: #fff;  
    position: absolute;  
    padding: 0;  
    z-index: 2;  
    display: none;  
}  

.info ul.submenu li  
{  
    display: block;  
    border-top: solid 1px #e0e0e0;  
    margin: 0px 10px 0 10px;  
}  

.info ul.submenu li a  
{  
    display: block;  
    padding: 7px 0px 6px 0;  
    color: #1177ee;  
    cursor:pointer;  
}  

</style>  

<script type="text/javascript">  

function hideMenus()
{
//TODO
}

function menu(id) {     
    var myLayer = document.getElementById(id);     

    myLayer.onblur = function() {       
        myLayer.style.display = 'none';   
    };   

    if (myLayer.style.display == "none" || myLayer.style.display == "") {     
        myLayer.style.display = "block";     
    } else {     
        myLayer.style.display = "none";     
    }     
}  

</script>  
</head>  

<body onclick="hideMenus();">  
<div class="info">     
     Some Text Boom A <a  onclick="menu('id1');">Link</a> | More text    
     <a onclick="menu('id2');">Another Link</a> | more text    
     <ul id="id1" class="submenu">     
       <li><a href="dfhdfh">A1</a></li>     
       <li><a href="aetjetjsd">A2 This is Long</a></li>     
       <li><a href="etetueb">A3</a></li>     
     </ul>     
    <ul id="id2" class="submenu">     
       <li><a href="dfhdfh">B1</a></li>     
       <li><a href="aetjetjsd">B2</a></li>     
       <li><a href="etetueb">B3</a></li>     
     </ul>     
  </div>    
</body>  
</html>

我不想使用jQuery.

解决方法

看起来你有一个相当体面的设置.你可能遇到一些事件冒泡的问题(更多信息,请查看 PPK’s Event Order Article).这似乎超出了你当前问题的范围,所以我只是给你你所要求的：

hideMenus()
{
    var uls = document.getElementsByTagName('ul'),i;
    for (i = 0; i < uls.length; i++)
    {
        if (uls[i].className === 'submenu' && uls[i].style.display !== 'none')
        {
            uls[i].style.display = 'none';
        }
    }
}

首先,我们获取页面上的所有< ul>.然后,我们循环遍历所有这些,检查它是否是一个子菜单,如果它当前显示.如果两者皆为真,则隐藏它.

这段代码有几个故障：

>如果uls有多个类(class =“动物子菜单”),那么它不会隐藏菜单
>它将查看页面上的所有< ul>.这不是完全有效的,但它是唯一的方式来做,而不需要跨浏览器支持getElementsByClass.

这些并不是巨大的错误,特别是如果你只是使用它来了解javascript,并且如果你密切地控制你的代码(即没有其他的开发人员正在使用它).总而言之,这是一个很好的垫脚石.

将来,我建议使用addEvent – 一个相当常见的函数,它允许您在不使用onclick =“…”的情况下向元素添加事件处理程序.有几种不同的实现方式,但它们(几乎)从你的角度来看都是一样的.以下是Dean Edwards’s Version和John Resig’s Version的链接

祝你好运！

Javascript body OnClick

解决方法

猜你在找的JavaScript相关文章