javascript - Div 的简单功能隐藏/显示/切换

Question

我正在尝试创建一个最初隐藏的 Div，以显示并保持切换状态，除非我执行以下事件之一(因此在这种情况下它们会再次隐藏):

• 重新单击第一手显示 div 的同一元素
• 在 div(容器)外部单击
• 在 div 子级(容器的后代)之外单击

这是我想出的代码: (#menu_login 是我单击以显示 div 的菜单，.bubble 是相关的 div)

$(document).ready(function(){
	
$(".bubble").hide();
$("#menu_login").click(function(){
$(".bubble").toggle();
});
$(document).mouseup(function (e)
{
    var container = $(".bubble");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});

所以首先，hide_on_load函数运行良好，但是toggle和mouseup函数一起运行时似乎存在冲突。

当我只使用其中一个时，它们工作得很好(我真的很喜欢这个 mouseup 函数，因为它允许我单击容器的后代，即使在 div 之外)。

发生的事情是当我单击菜单并切换 div 时，如果我再次单击它以取消切换并隐藏 div，我的 mouseup 函数会产生冲突: 看起来因为我再次在菜单上取消切换并再次隐藏 div，mouseup 函数还检测到我在 div 外部单击并在切换函数之前隐藏了 div。 所以发生的情况是，切换函数不会检测到我单击了菜单来取消切换并隐藏 div，但我单击了切换并显示了 div，因为 mouseup 函数在 0.01 秒之前将其关闭。

所以我真的不知道如何让这两个函数一起工作，我有一些关于添加一个异常(exception)的想法，该异常(exception)对 mouseup 函数说，如果我单击菜单(同样，如果我点击 div 的后代，它也不会关闭它)，所以我的切换函数可以做到这一点并且没有冲突，但我对 JQuery 的了解是不存在的。

示例:

$(document).mouseup(function (e)
{
    var container = $(".bubble");

    if (!container.is(e.target)  container...
        && container.has(e.target).length === 0)
        // and here : "don't close it if i click on my #menu_login neither
    {
        container.hide();
    }

欢迎任何帮助/建议，很抱歉，如果这读起来有点繁重，但我试图尽可能具体。

谢谢!

-Apatik

Answer 1

您必须考虑三个部分:

1. 点击 #menu_login 时看到的切换操作(您已经解决了这个问题)。但更重要的是，我们要确保来自该元素的单击事件不会冒泡到文档对象，我们也将监听该文档对象的单击。这是通过使用 event.stopPropagation() 来完成的。
2. 为了防止 .bubble 元素内的点击冒泡，您还必须阻止源自该元素的事件传播。
3. 监听点击事件冒泡到文档。由于我们在 anchor 元素上使用了 event.stopPropagation()，因此单击事件不会从 anchor 元素中冒泡，而是从文档的其余部分(即其他元素)冒泡。我们通过使用 .filter() 有条件地隐藏 .bubble 元素(如果它可见)。

$(function(){
  $('.bubble')
  .hide()
  .click(function(event) {
    // Stops click event from bubbling to document (point #2)
    event.stopPropagation();
  });
  $('#menu_login').click(function(event){
    // Stops click event from bubbling to document (point #1)
    event.stopPropagation();
    
    // Toggle visibility (point #1)
    $('.bubble').toggle();
  });
  $(document).click(function() {
    // Hide bubble if visible (point #3)
    // Will listen to click events from all other elements
    // ... except for `#menu_login` because we have
    // ... prevent the click event from bubbling up
    $('.bubble').filter(':visible').hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="menu_login" href="#">Menu login</a><div class="bubble">Bubble</div>