javascript - 隐藏元素模糊，当它显示时

Question

我不明白为什么我的功能不起作用。它正在显示登录表单，但是当我模糊（单击表单以外的其他位置）时，它并没有隐藏。

这是我的错误代码：

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

Answer 1

您可能不希望仅在触发单击事件时处理此模糊。将 blur 事件移出 click 事件

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");
});