javascript - 当 UL 失去焦点时 OnFocusOut 不起作用

Question

我需要你的帮助，

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

这是问题的图片:

这是问题中的代码:

<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 对象来检查哪个元素被单击，并根据该 ID 显示/隐藏。

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