当使用jQuery UI MultiSelect小部件在文档上单击除元素之外的任何位置时，此隐藏功能都会起作用

我正在用无序（）HTML列表设置一些Select元素的样式，当用户单击元素区域之外的任何位置时，此函数应该隐藏这些元素，但由于某些原因，当用户单击使用

更新-我创建了一个JSFIDLE来演示这个问题，单击打开标记为“UL元素”的项目-如果您将鼠标悬停在“UL元素”的任何下拉项目上，或者单击文档或它按预期工作的其他元素，但是，如果您单击“MultiSelect元素”而不将鼠标悬停在任何“UL元素”项上，它将保持打开状态

我还尝试创建一个单独的函数，在用户单击multiselect元素时关闭该元素，但这也不起作用

$('.multiselect').click(function() {
    $("#select1").hide();
});      

HTML

您是否尝试过使用.blur（）隐藏列表？你可以试试：

$("#select1").blur(function(){
     $(this).hide();
});

我以前没有使用过multiselect插件，也没有对此进行过测试，但我认为检查某个项目何时失去焦点比在每个项目中添加事件并在单击时检查要好。希望有帮助

更新：

---

打开时有一个Multiselect的事件。如果您查看这个JSFIDLE，我已经在调用它时关闭了另一个select:

我已经试过了，但不幸的是，这并没有用选项关闭元素。你有我能看到的示例吗？这样调试可能会更容易。我刚刚创建了一个：-）要查看实际问题，请单击打开标记为“UL元素”的项目，然后单击“MultiSelect元素”（无需将鼠标悬停在“UL元素”中的任何项目上）。如果单击文档或其他元素，您将看到它按预期工作。我已经更新了原始答案。希望这是一个可行的解决方案。天哪！太棒了，谢谢你！

<div id="dropdown_box1"><span>Select</span></div>
<div class="dropdown_container" id="dropdown_container1">  
    <ul id="select1"> 
        <!-- Several List Item Elements --> 
    </ul>
</div>

    $(document).ready(function () {
        $("#dropdown_box1").click(function () {
            $("#select1").show();
        });
        var timeoutID;
        $("#select1").mouseleave(function () {
              timeoutID = setTimeout(function () {
                  $("#select1").hide();
            }, 800);
        });
          $("#select1").mouseenter(function () {
            clearTimeout(timeoutID);
        });
     });

$("#select1").blur(function(){
     $(this).hide();
});