除非单击某个div,否则jQuery在焦点突出时隐藏div

使用jQuery 1.6或更高版本,可以在隐藏div之前使用:focus选择器查看div是否有具有focus的子级。

$("#textboxID").blur(function () {
    if ($("#divID").has(":focus").length == 0) {  //if you click on anything other than the results
        $("#divID").hide();  //hide the results
    }
});

更新: 结果发现这只在IE中有效。这是一个更好的解决方案,尽管任务有点复杂。 http://jsfiddle.net/cB2CN/

var resultsSelected = false;
$("#ResultsDIV").hover(
    function () { resultsSelected = true; },
    function () { resultsSelected = false; }
);

$("#TextBox").blur(function () {
    if (!resultsSelected) {  //if you click on anything other than the results
        $("#ResultsDIV").hide();  //hide the results
    }
});

我正在为我正在构建的一个web应用程序开发一个自定义搜索引擎。这是我为一个类似问题提出的解决方案。据我所知,它适用于所有浏览器。

$( document ).ready(function() {
    $( '#inputBox' ).focusout( function() {
        $( '#resultsDiv' ).hover(
            function() {         
                return;
            },
            function() {
                $( '#resultsDiv' ).fadeOut( 'slow' );
                $( '#resultsDiv' ).html( '' );
            });
    });
});

我把模糊方法改为focusout(顺便说一下,必须全部小写……focusout不起作用)。.hover事件有两个条件:true或false。第一个函数如果为真(如果用户悬停在结果上),则激发;第二个函数如果用户不悬停在结果上,则激发。

我遇到的唯一“问题”是,当用户离开resultsdev时,它就会消失。我会在它周围添加一点空白填充,以确保用户不会在意外情况下离开它。