Javascript 主体 OnClick

我正在学习 Javascript，我正在尝试创建一个简单的下拉菜单。我想要的功能的一个例子可以在谷歌主页的顶部菜单中看到，带有“更多”和“设置”下拉菜单。具体来说，当您单击关闭菜单时，菜单会消失。

我需要在 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';
        }
    }
}

首先，我们获取页面上的所有

这段代码有几个错误:

如果 uls 有多个类(class="animal submenu")，那么它不会隐藏菜单
它将查看页面上的所有
这些都不是什么大问题，特别是如果您只是用它来学习 javascript，并且您密切控制您的代码(即没有其他开发人员在处理它)。总而言之，这是一个很好的垫脚石。

将来，我建议使用 addEvent - 一个相当常见的函数，允许您在不使用 onclick="..." 的情况下向元素添加事件处理程序.它有几个不同的实现，但从您的 Angular 来看，它们(几乎)都以相同的方式工作。这里是 Dean Edwards's Version 的链接和 John Resig's Version

祝你好运!

关于Javascript 主体 OnClick，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3521487/

Javascript 主体 OnClick

上一篇：c# - 如何使用 jquery 将图像 ajax 发布到 C# web 方法

下一篇：javascript - 如何让新的 Facebook Javascript SDK 在 IE8 中运行？