Jquery 點擊輸入框顯示div，點擊正文隱藏div

Question

當您單擊它時，我有一個輸入字段，它會在其下方顯示/顯示一個 div。

一旦 div 正在顯示，如果您在 div 中單擊，div 將保持顯示（顯示塊），如果您單擊 div（在正文上），div 將消失（不顯示）。

    $("#input-field").click(function() {
       $("#div").show();
       $("#div").ready(function(){
          if ($('#div').css('display') == 'block')
             {
                $(document).click(function(e) {
                    if (e.target.id != 'div' && !$('#div').find(e.target).length) {
                        $("#div").hide();
                    }
                });
             }
       });
    });  

問題是，這一次工作正常（單擊輸入字段，div 顯示，然后單擊正文，div 消失），但如果我再次單擊輸入字段，則沒有任何反應。

我已經為此苦苦掙扎了幾個小時......

https://jsfiddle.net/n8671asp/1/

Answer 1

只需將事件click更改為mouseup 。 希望它會起作用。

$(document).mouseup(function(e) {
    if (e.target.id != 'div' && !$('#div').find(e.target).length) {
        $("#div").hide();
    }
});

Answer 2

您可能不想要這個，但是與其查看目標是否不是輸入，不如只關注.focus()和.focusout()怎么樣？ 這些函數控制什么時候可以輸入，什么時候不能輸入。

 $("#input-field").focus(function() { $("#div").show(); }); $("#input-field").focusout(function(e) { $("#div").hide(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- example HTML --> <div id="div">I'm the div</div> <input val="input to click" id="input-field">