0

我在使用 jQuery 时遇到问题,希望得到您的帮助。我一直在寻找解决方案很长时间,但一无所获。

我有一个输入字段,当我单击(聚焦)它时,DOM 中会出现一些具有特定 ID 的 div,当我单击其他地方(模糊)时,该 div 会隐藏。

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

那么我该怎么做呢?

谢谢你,对不起我的英语不好。

$(function(){

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

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

});

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

4

2 回答 2

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

于 2013-07-12T14:17:08.590 回答
0

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

$(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();
}); 
});
于 2013-07-12T14:17:28.497 回答