Question

我遇到了jQuery的问题并希望得到你的帮助。我一直在寻找解决方案很长一段时间，但却一无所获。

我有一个输入字段，当我点击（焦点）它时，一些具有特定ID的div出现在DOM中，当我点击其他地方（模糊）时，该div隐藏。

我需要做的是，当我点击那个特定的div时，让它保持可见而不是隐藏。

那我怎么能这样做？

谢谢你，抱歉我的英语不好。

$(function(){

    $('input').focus(function() {
        $('#visible-block').show();
    });

    $('input').blur(function() {
        $('#visible-block').hide();
    });

});

我有一个小小的演示：http://jsfiddle.net/uJ8nW/

Answer 1

在隐藏输入之前，只需检查您是否将鼠标悬停在div上：

$('input').blur(function() {
    if(!$('#visible-block').is(":hover"))
        $('#visible-block').hide();
});

jsfiddle

编辑：阅读完评论后，这里是新的解决方案，无需模糊功能：

$(function(){

    $('input').focus(function() {
        $('#visible-block').show();
    });

    $('#visible-block').blur(function() {
         $('#visible-block').hide();
    });

    $('html').click(function() {
        //Hide the menus if visible
        $('#visible-block').hide();
    });

     $('input').click(function(event){
        event.stopPropagation();
    });

    $('#visible-block').click(function(event){
        event.stopPropagation();
    });

});

以下是更新jsfiddle

Answer 2

也许不是最好的解决方案，但可能符合您的需求。

$(function(){

$('input').focus(function() {
    $('#visible-block').show();
});

$('input').blur(function() {
    if (!$('#visible-block').is(":hover"))
        $('#visible-block').hide();
}); 

$('#wrapper').click(function() {
    if (!$('#visible-block').is(":hover") && !$('input').is(":hover"))
        $('#visible-block').hide();
}); 
});

jQuery停止事件冒泡输入模糊方法？

2 个答案: