Question

我在这个特定问题的逻辑上陷入两难境地。原谅我，如果这是一个非常新手的问题，但我宁愿有一个坚实的bg。

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

的问候，

Answer 1

我有一段时间没有这样做，但一个简单的解决方案是在DOM树的顶部添加一个click事件来关闭open元素。这是psuedo-javascript中的一个例子：

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

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

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

Answer 2

一般来说，逻辑是相反的（至少对于菜单），即所讨论的元素被隐藏，直到状态事件取消隐藏，然后再次按照指示隐藏。关键是隐藏/取消隐藏逻辑通常与元素本身相关联，而不是页面上的其他所有内容。

至于如何完成，方法各不相同。有许多Javascript解决方案，大部分都与已经概述的方式一致，但菜单也可以完全用CSS完成 - 通常使用 display：none; 属性，尽管你也可以做类似设置的东西/取消设置负边距，以便元素在页面上移动。

以示例的方式使用我自己的一些作品：

Answer 3

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

Answer 4

$('#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 5

这是一种方法。

您也可以编写一个方法来捕获（挂钩）所有“点击”事件而不管元素如何，并从那里隐藏您的菜单。

JQuery会让您更轻松地完成这项任务。

Answer 6

步骤1-使用javascript库，以便您可以将代码尽可能地设置为跨浏览器 - 否则您必须满足Internet Explorer和基于gecko / webkit的浏览器之间的两种不同事件模型。 JQuery，Mootools，YUI - 所有人都会为你处理这个问题 - 还有更多，但这3个是我最喜欢的并且有很好的文档记录。

第2步 - 你可能希望为此实现一个clickshield - 本质上是一个块级dom元素，它绝对位于整个页面上，其z-index高于页面的其余部分。将click事件附加到该事件，您可以执行逻辑以隐藏页面上的元素。 clickshield可以轻松地将javascript代码扩展到使用上述任何javascript库的方法进行DOM渲染后页面的宽度 - 高度。

隐藏元素背后的逻辑

6 个答案: