javascript - 如何在文本框获得焦点时隐藏 div？

Question

我有一个侧边栏，在我点击 body 之前它运行良好。

发生在边栏中

1. 点击侧边栏出现，鼠标移出时它隐藏。
2. 当侧边栏内的输入框获得焦点时，不应隐藏它。
3. 当输入未聚焦时，它会很好地遵循步骤 1。

我想要什么-

当输入集中在侧边栏内，同时由于 body 的输入框焦点而集中在外面时，该侧边栏应该隐藏或在 body 点击时它应该隐藏在 Action 上。

jQuery-

$(function(){

    $('.sidebar-alert').on('click',function(){
    $(this).animate({left:0},200);
    event.stopPropagation();   
}); 
    $('.sidebar-alert').on('mouseleave ',function(){

        if($(".focused-input").is(":focus"))
    {
        $('.sidebar-alert').show();
    }


        else
        {
            $('.sidebar-alert').animate({left:-295},200);

        }

    });
});

我无法绑定(bind)鼠标悬停和单击以隐藏侧边栏。

JS fiddle

更新的 fiddle

Answer 1

您可以为输入添加blur 事件。这将解决您遇到的问题

 $(".focused-input").on('blur', function() {
     $('.sidebar-alert').animate({
          left: -295
     }, 200);
 });

Check Fiddle