Javascript正文OnClick [英] Javascript body OnClick
问题描述
我正在学习Javascript，我正在尝试创建一个简单的下拉菜单。我可以在顶部菜单的Google主页上看到我所需功能的一个示例，其中包含更多和设置下拉列表。特别是当您单击菜单时，菜单消失。
I'm in the process of learning Javascript and I'm trying to create a simple dropdown menu. An example of my desired functionality can be seen on the google homepage in the top menu with the "more" and "settings" dropdown. Specifically when you click off the menu, the menu disappears.
我需要在Javascript中的hideMenus函数中放置什么代码，以便在任何地方发生单击时隐藏可见的uls在屏幕上？
What code do I need to place in the hideMenus function in Javascript to hide the visible uls when a click occurs anywhere on screen?
<!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。
I do not want to use jQuery.
推荐答案
看起来你有一个相当不错的设置。您可能会遇到一些事件冒泡问题（有关更多信息，请参阅 PPK的活动顺序文章）。这似乎超出了您当前问题的范围，所以我只会告诉您所要求的内容：
It looks like you have a pretty decent setup as-is. You'll likely run into some event bubbling problems (for more info, take a look at PPK's Event Order Article). That seems to be outside of the scope of your current question, so I'll just give you what you asked for:
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>在页面上。然后，我们遍历所有这些，检查它是否是子菜单，以及它当前是否显示。如果两者都是真的，那么我们隐藏它。
First, we get all the <ul>'s on the page. Then, we loop through all of them, check to see if it's a submenu, and if it's currently displayed. If both are true, then we hide it.
这段代码有几个错误：
- 如果uls有多个班级（
class =animal submenu），那么它将不会隐藏菜单 - 它将通过所有页面上的< ul>来查看。这不是很有效，但是如果没有跨浏览器支持
getElementsByClass，这是唯一的方法。
- If the uls have more than one class (
class="animal submenu"), then it will not hide the menu - It will look through all the <ul>'s on the page. This isn't exactly efficient, but it's the only way to do it without cross-browser support for
getElementsByClass.
这些不是很大的错误，特别是如果你只是用它来学习javascript，并且如果你密切控制你的代码（即没有其他开发人员正在研究它）。总而言之，这是一个很好的垫脚石。
These aren't huge faults, especially if you're only using this to learn about javascript, and if you closely control your code (i.e. no other developers are working on it). All in all, it's a good stepping stone.
将来，我建议使用 addEvent - a相当常见的函数，允许您在不使用 onclick =...的情况下向元素添加事件处理程序。它有几种不同的实现，但它们（几乎）从你的角度来看都是一样的。以下是 Dean Edwards的版本和 John Resig的版本
In the future, I'd suggest using addEvent - a fairly common function that allows you to add event handlers to elements without using onclick="...". There are a couple different implementations of it, but they (almost) all work the same from your perspective. Here are links to Dean Edwards's Version and John Resig's Version
祝你好运！
这篇关于Javascript正文OnClick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
