javascript - 表示時に要素を非表示にする

Question

機能が動作しない理由がわかりません。ログインフォームが表示されていますが、ぼかしても（フォーム以外の場所をクリックしても）隠れません。

ここに私のバグのあるコードがあります:

$(document).on('click', '#login-btn', function(){ 
      var $form = $("#login");
      $form.show("slow" );
      $("#login").on('blur', function (){
        $form.hide("slow");
       });      
 });

Answer 1

おそらく、クリック イベントが発生したときにのみこのぼかしを処理することは望ましくありません。ぼかしイベントをクリック イベントの外に移動します。

var $form = $("#login");    
$(document).on('click', '#login-btn', function(){ 
    $form.show("slow" );  
    $('#loginUsername').focus(); 
});
$form.on('focusout', function (){
    $form.hide("slow");
});

Answer 2

あなたはこれを行うことができます：

var $form = $("#login");
$(document).on('click', '#login-btn', function () {    
    $form.show("slow");
}).on('blur', '#login', function () {
    $form.hide("slow");
});