当UL失去焦点时，OnFocusOut无法正常工作

Question

我需要你的帮助，

对于我的一生，我似乎无法弄清楚为什么我无法设置$("#fileno_list").css("display", "none"); 就是 当用户尚未做出选择并决定单击页面上的其他位置时。 然后，下拉框应关闭。 （显示：无）。

这是问题的图片：

这是Question中的代码：

<script type="text/javascript">
$(document).ready(function() {


    $("#fileno_list ul").focusout(function() {

        $(this).css("display", "none");


    });



});

function test() {

var rs_count = 3

    if (rs_count > 1) {

        for (var x = 0; x < rs_count; ++x) {

            $("#fileno_list").append('<li>'+x+'</li>');

        }

        $("#fileno_arrow").css("display", "block");

    }

    $("#fileno_arrow").click(function() {

        $("#fileno_list").css("display", "block");

    });

    $("#fileno_list li").click(function(e) {

        var select = $(this).closest('#fileno_list')

        select.find(".selected").removeClass('selected');

        $(this).addClass('selected');

        $("#fileno").val(   $.trim( $(this).html()  )   )

        $("#fileno_list").css("display", "none");

    });

    $("#fileno").val( $("#fileno_list li").eq(0).html() )

}



</script>

这是HTML标记：

<div class="field_container">

    <div class="field_wrapper"><input type="text" class="field" id="fileno"></div>

    <div id="fileno_arrow"></div>

    <ul id="fileno_list"></ul>


</div>
<br>
<br>

<input type="button" onclick="test()" value="click me">
<br>

Answer 1

假设您的选择标记具有ID，则可以使用event对象检查单击了哪个元素，并基于该对象显示/隐藏。

 $(document).click(function(e) {
        if(e.target.id === "idOfSelect")
          $("#idOfSelect").show();
    });