Question

我有一个侧边栏，在我点击身体之前表现良好。

在侧栏中发生

点击侧边栏出来，鼠标移开时会隐藏。
当侧边栏内的输入框被聚焦时，它不应该隐藏。
当输入没有聚焦时，它很好地遵循第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 fiddle

更新小提琴

Answer 1

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

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

<强> Check Fiddle

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

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

2 个答案: