隐藏元素背后的逻辑

Question

我在这个特定问题的逻辑中有两难。原谅我，如果这是一个很新手的问题，但我宁愿有一个坚实的BG。

在网络上有很多这样的例子，你点击一个元素来显示另一个元素。这种情况可能是一个菜单，当你将鼠标悬停在它上面（或点击它）它的显示。稍后，元素会在鼠标移出时隐藏，或者点击任何其他元素。所以，这是如何实现的？我相信解决方案不是要在所有元素上绑定“hideElem”函数。

关于，

Answer 1

$('#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事件在整棵树上上下移动。因此，当您想要侦听多个元素上的事件时，您可以将事件侦听器绑定到任何父级。

这被称为事件委托。

Answer 2

这是一种方法。

您也可以编写一种方法，将所有“单击”事件陷入（钩入）而不管元素如何，并从此处隐藏菜单。

JQuery会让这个任务更容易。

Answer 3

我一段时间都没做过，但一个简单的解决方案是在DOM树的顶部添加一个单击事件，它将关闭打开的元素。下面是伪的JavaScript的例子：

document.body.onclick = function() { 
    element.style.display = "none"; 
} 

如果你需要“显示”元素中复杂的行为，请确保您防止传播了DOM树必要的事件。

element.onclick = function(e) { 
    e.stopPropagation() 
} 

Answer 4

一个便宜的方法可能是将事件处理程序绑定到可点击项目的“（on）blur”事件和/或它的目标。如果你的设计允许。

Answer 5

一般来说，逻辑是相反的方式（至少有菜单），即隐藏元素直到状态事件取消隐藏，然后再按指示隐藏。关键在于隐藏/取消隐藏逻辑通常与元素本身绑定，而不是页面上的所有其他元素。

至于它是如何完成的，方法会有所不同。有很多Javascript解决方案，大部分都是按照已经概述的方式，但菜单也可以纯粹用CSS完成 - 通常使用display：none;属性，尽管您也可以执行诸如设置/取消设置负边距的内容，以便将元素从“页面上移开”。

要使用一些我自己的工作中通过举例的方式：

• Drop-down menu with Javascript
• Drop-down menu with jQuery
• Drop-down menu with CSS

Answer 6

第1步 - 使用JavaScript库，所以你可以有代码尽可能跨越浏览器 - 否则，您必须迎合Internet Explorer和基于壁虎/ Webkit的浏览器之间的两种不同的事件模型。 JQuery，Mootools，YUI - 所有这些都会为你处理 - 还有更多，但是这3个是我最喜欢的，并且有很好的文档记录。

第2步 - 你的概率会想实施这个clickshield - 本质上是绝对定位在您的整个页面具有较高的z-index大于页面的其余部分的块级DOM元素。附加一个点击事件，你可以执行你的逻辑来隐藏页面上的元素。clickshield可以很容易地让JavaScript代码将其扩展为页面宽度 - 使用上述任何一种JavaScript库的方法发布DOM渲染。