隐藏元素在模糊，当它显示

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