Question

我想知道如何通过点击页面中的任何位置隐藏下拉列表，我想要选择相同的功能，如选择字段（<select></select>），如果我们打开任何选择字段然后单击页面中的任意位置回来。

如果我的问题不明确，请告诉我。

感谢。

Answer 1

var mouse_is_inside = false;

$(document).ready(function()
{
    $('.form_content').hover(function(){ 
        mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });

    $("body").mouseup(function(){ 
        if(! mouse_is_inside) $('.form_wrapper').hide();
    });
});

从Use jQuery to hide a DIV when the user clicks outside of it

被盗

Answer 2

如果你想使用bind和unbind，你只需在显示内容时绑定事件处理程序，并在隐藏它时将其解除绑定，因为如果它被隐藏，则不需要用鼠标隐藏它。

所以，你会做类似的事情：

$('#fakeSelect').click(function(){
    if($(this).is(":visible")){
        $('body').unbind('mousedown', mouseFunction);
    } else {
        $('body').uind('mousedown', mouseFunction);
    }
});

MouseFunktion类似于：

var mouseFunction = function(event){
    if($(event.target).closest('#fakeSelect').length > 0){
        return;
    }
    $('#fakeSelect').hide();
}

if语句检查点击是否在fakeSelect中，在这种情况下你不想做任何事情（点击事件要小心，或者你想要实现类似于检查点击了哪个元素的东西。

我做了一个jsfiddle来说明重点：http://jsfiddle.net/Sgoettschkes/vrnjw/2/

在外部点击时隐藏选择字段

2 个答案: