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函数运行良好，但切换和mouseup函数在一起运行时似乎存在冲突。

当我只使用其中一个时，它们运行良好（我真的很喜欢这个鼠标功能，因为它允许我点击容器的后代，即使在div之外）。

发生的事情就是当我点击菜单并切换div时，如果我再次点击它以解开并隐藏div我的mouseup函数会产生冲突：它看起来是因为我再次在菜单上解开并再次隐藏div，鼠标功能还检测到我在我的div之外点击并在我的切换功能之前隐藏了我的div。所以发生的事情是，切换功能不会检测到我点击了菜单以解开并隐藏div，但是我点击切换并显示div，因为mouseup函数在0.01秒之前关闭了它。

所以我真的不知道如何让这两个函数一起工作，我有一些想法，如果我点击菜单（如果我点击菜单，则添加一个对mouseup函数说不要隐藏div的exeption）如果我点击一个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

您需要考虑三个部分：

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

$(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>

Div

1 个答案: