隐藏元素背后的逻辑
我在这个特定问题的逻辑上陷入了两难境地。 原谅我，如果这是一个非常新手的问题，但我宁愿有一个坚实的bg。
在网络上有很多这样的例子，你点击一个元素来显示另一个元素。 这种情况可能是一个菜单，当你将鼠标hover在它上面（或点击它）时，它会显示出来。 之后元素会在鼠标移出时隐藏，或者点击任何其他元素..所以，这是如何实现的？ 我确信解决方案不是在所有元素上绑定“hideElem”函数。
问候，
$('#target').bind('click', function(event) { var $element = $('#element'); $element.show(); $(document).one('click', function() { $element.hide(); }); // If you don't stop the event, it will bubble up to the document // and trigger the click event we just bound. // This will hide the element right now just after showing it, // we don't want that. event.stopPropagation(); } 您必须记住，Javascript事件在开始触发时会在整个树上上下移动。 因此，当您想要侦听许多元素上的事件时，可以将事件侦听器绑定到任何父级。
这称为事件委托。
我暂时没有这样做，但一个简单的解决方案是在DOM树的顶部添加一个click事件来关闭open元素。 这是psuedo-javascript中的一个例子：
document.body.onclick = function() { element.style.display = "none"; }
如果在“显示”元素中需要复杂的行为，请确保阻止必要的事件向上传播DOM树。
element.onclick = function(e) { e.stopPropagation() }
一般来说，逻辑是相反的（至少对于菜单），即所讨论的元素被隐藏，直到状态事件取消隐藏，然后再次按照指示隐藏。 关键是隐藏/取消隐藏逻辑通常与元素本身相关联，而不是页面上的其他所有内容。
至于它是如何完成的，方法各不相同。 有很多Javascript解决方案，大多数都是按照已经概述的方式，但菜单也可以完全用CSS完成 – 通常使用display：none; 属性，虽然你也可以做一些事情，比如设置/取消设置负边距，以便元素在页面上移动。
以示例的方式使用我自己的一些工作：
- 使用Javascript下拉菜单
- 使用jQuery下拉菜单
- 带CSS的下拉菜单
一种廉价的方法可能是将事件处理程序绑定到可点击项目和/或其目标的“（on）blur”事件。 如果你的设计允许。
这是一种方法。
您还可以编写一个方法来捕获（挂钩）所有“点击”事件而不管元素，并从那里隐藏您的菜单。
JQuery会让您更轻松地完成这项任务。
第1步 – 使用javascript库，这样你就可以让代码尽可能地跨浏览器 – 否则你必须迎合Internet Explorer和基于gecko / webkit的浏览器之间的两种不同的事件模型。 JQuery，Mootools，YUI – 所有人都会为你处理这个问题 – 还有更多，但这3个是我最喜欢的并且有很好的文档记录。
第2步 – 你可能希望为此实现一个clickshield – 本质上是一个块级dom元素，它绝对位于整个页面上，其z-index高于页面的其余部分。 将click事件附加到该事件，您可以执行逻辑以隐藏页面上的元素。 clickshield可以轻松地将javascript代码扩展到使用上述任何javascript库的方法进行DOM渲染的页面的宽度 – 高度。