识别 jquery-ui 对象时出现问题

Question

我在使用 jQuery 识别项目时遇到一个小问题。让我更好地解释一下:)

当用户单击按钮时，我会出现一个菜单。这工作得很好。然后，我希望当用户单击网站上除菜单之外的任何部分时，此菜单消失。这也很好用，但有一个小问题：在菜单中，有一个项目允许用户从自动完成列表中进行选择。该列表是使用 jquery-ui 自动完成完成的。当用户单击此处的某个项目时，菜单消失（它不应该:)），并且我不知道如何对此进行例外处理，因为我不知道如何获取该项目，我可以吗按班级抢吗？有id吗？

我有以下代码来识别单击的位置并继续（您可以看到，如果单击菜单按钮或菜单，菜单将不会隐藏）。在 jQuery-ui 自动完成中单击时如何例外？

$(document).click(function(event) {
    if($(event.target).parents().index($('#menu')) == -1 && $(event.target).parents().index($('#menu-button')) == -1) {
        if($('#menu').is(":visible")) {
            $('#menu').hide(500);
        }
    }
});

谢谢！

Answer 1

自动完成ul有一个ui-autocomplete类。因此，您可以通过执行 $(".ui-autocomplete") 来获取它。

但是，我的首选方法是执行以下操作：

$(".ui-autocomplete").click(function(e){
   e.stopPropagation();
   //... and maybe some other stuff
}

这基本上会阻止点击冒泡，因此不会触发文档点击。

Answer 2

您可以按类别拾取这些物品。
我想我会把它改成：

    $(document).click(function(event) {
        if($(event.target).parents().index($('#menu')) == -1 &&
               $(event.target).parents().index($('#menu-button')) == -1  &&
               $(event.target).parents().index($('.ui-autocomplete-input')) == -1 &&
               $(event.target).parents().index($('.ui-autocomplete')) == -1 ) {
            if($('#menu').is(":visible")) {
                $('#menu').hide(500);
            }
        }
    });