用户界面 - 识别 jquery-ui 对象时出现问题

Question

我有一个小问题，用jQuery识别一个项目。让我解释一下更好的:)

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

我有以下代码来确定单击的位置并继续（您可以看到，如果单击菜单按钮或菜单，菜单将不会隐藏）。当点击在 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);
            }
        }
    });