javascript - 文本框聚焦时如何隐藏div？

Question

在我点击正文之前，我有一个运行良好的侧边栏。

发生在侧边栏

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

我想要的是-

当输入集中在侧边栏内，同时由于正文的输入框焦点而集中在外时，则此侧边栏应隐藏或在正文单击时应隐藏在操作中。

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

        }

    });
});

我无法绑定鼠标悬停并单击以隐藏侧边栏。

JS小提琴

更新的小提琴

Answer 1

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

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

检查小提琴

Answer 2

您可以在这部分代码片段中再添加一个事件和选择器，如下所示：

$('.sidebar-alert, .focused-input').on('mouseleave focusout', function () {
    if ($(".focused-input").is(":focus")) {
        $('.sidebar-alert').show();
    } else {
        $('.sidebar-alert').animate({
            left: -295
        }, 200);
    }
});