Jquery 在div外部单击时隐藏div

我尝试创建一个自定义下拉列表。我想使其作为默认下拉菜单工作，就像在div外部单击时隐藏所有选项。只要我尝试这样做，我可以在div外部（文档内部）单击时隐藏所有选项。但当我点击浏览器URL或页面标题时，下拉列表并没有隐藏

这是我的密码：

$（文档）.ready（函数（）{
$（“#dvStatsDate”）。单击（函数（）{
如果（$（“#customSelectBox”）是（“：可见”））
$（“#customSelectBox”）.hide（）；
其他的
$（“#customSelectBox”）.show（）；
});
$（“#customSelectList>li”）。单击（函数（）{
$（“#statsDate”）.text（$（this.find（“span”）.text（））；
$（“#customSelectBox”）.hide（）；
});
$（文档）。单击（函数（事件）{
if（！$（event.target）.is（“#dvStatsDate，#statsDate”））{
$（“#customSelectBox”）.hide（）；
}
});
});
.dvCustomSelect{
宽度：236px；
显示：表格；
位置：相对位置；
}
.dvCustomSelect>div{
显示：表格单元格；
}
.dvCustomSelect>div:最后一个子项{
宽度：80%；
}
.dvCustomSelect.divSelect{
边界半径：3px；
背景色：#fff；
边框：1px实心#ccc；
}
.dvCustomSelectbox{
位置：相对位置；
}
.dvCustomSelectLbl>div{
宽度：100%；
颜色：#555555；
光标：指针；
字体大小：14px；
最小高度：21px；
填充：5px 8px；
线高：20px；
利润底部：3倍；
边界半径：3px；
显示：内联块；
背景色：#ffffff；
边框：1px实心#中交；
}
.dvCustomSelectLbl>div i.fa{
浮动：对；
}
.dvCustomSelectOptions{
左：0px；
最高：100%；
宽度：204px；
z指数：221；
显示：无；
利润上限：-4px；
位置：绝对位置；
边界半径：3px；
背景色：白色；
边框：1px实心#中交；
}
.dvCustomSelectOptions ul{
列表样式：无；
左边距：0px；
边缘底部：0px；
-webkit填充开始：0；
-之前的webkit页边距：0；
-webkit后的页边距：0；
}
.dvCustomSelectOptions ul li{
游标：默认值；
字体大小：13px；
填充：2x10px；
背景色：白色；
}
.dvCustomSelectOptions ul li:非（：最后一个子项）：悬停{
颜色：白色；
背景色：rgb（0，120，163）；
}
.dvCustomSelectOptions ul li：第一个孩子{
边框左上半径：3px；
边框右上角半径：3px；
}
.dvCustomSelectOptions ul li：最后一个孩子{
边框左下半径：3px；
边框右下半径：3px；
}

日期
今天

今天
昨天
本周
上周
这个月
上个月
本季度
上季度
今年
去年

我认为不可能做到你要求的每一件事

您可以使用.Wolff建议的
$（window）.blur（）
，但这仅在您单击可以接收焦点的内容（如地址栏输入）时有效。只需单击浏览器窗口的一部分不会使窗口模糊，因此我认为您不会根据您的单击要求获得此功能

如果你放松了点击要求，你可以把弹出窗口隐藏在mouseleave上。如果不是，那么A.Wolff的答案可能与使用jquery/javascript得到的答案一样好

JSFIDDLE

还更新了显示/隐藏逻辑以使用.toggle

$("#dvStatsDate").click(function () {
    $("#customSelectBox").toggle();
});

似乎是您期望的行为，在
窗口
失去焦点时隐藏元素：

$(window).on('blur', function(){
    $("#customSelectBox").hide();
});

这会让你达到目的

$.fn.clickOff = function(callback, selfDestroy) {
    var clicked = false;
    var parent = this;
    var destroy = selfDestroy || true;

    parent.click(function() {
        clicked = true;
    });

    $(document).click(function(event) { 
        if (!clicked) {
            callback(parent, event);
        }
        if (destroy) {
            //parent.clickOff = function() {};
            //parent.off("click");
            //$(document).off("click");
            //parent.off("clickOff");
        };
        clicked = false;
    });
};

$("#myDiv").click(function() {
    alert('clickOn');
});

$("#myDiv").clickOff(function() {
    alert('clickOff');
});

您需要该功能的具体原因是什么？它如何影响最终用户？如果他们正在点击标题或URL，他们显然正在离开您的网站，我看不出您希望将此功能写入代码的逻辑原因，但如果我错了，请告诉我：-）blur不会启动，除非您关注文档中的其他内容。
$（窗口）。on（'blur'，function（）{$(“#customSelectBox”）.hide（）；}）
@buschschwick，这是我的项目的要求。默认选择的行为类似于此，自定义选择应该类似于默认选择。当用户单击浏览器url栏时，并不意味着他离开页面。如果他关心窗口，他可以在主体上进行绑定。不能多次打开它，因为您没有重新显示列表。不管怎么说，这与OP的行为似乎不同expect@A.Wolff，您是对的。我使用的是customselectlist而不是customselectbox。用户现在可以多次打开它。@Brino，当我将鼠标悬停在自定义选择框上，然后离开选择框时，它会隐藏选择框。它仅在用户在自定义选择框外单击时才会隐藏。这是当单击浏览器窗口、标题或地址栏时不起作用。当我单击地址栏时，它起作用。但当我单击当前页面标题栏、书签栏时，它不起作用。很抱歉，没有事件afaik来处理此行为。
$.fn.clickOff = function(callback, selfDestroy) {
    var clicked = false;
    var parent = this;
    var destroy = selfDestroy || true;

    parent.click(function() {
        clicked = true;
    });

    $(document).click(function(event) { 
        if (!clicked) {
            callback(parent, event);
        }
        if (destroy) {
            //parent.clickOff = function() {};
            //parent.off("click");
            //$(document).off("click");
            //parent.off("clickOff");
        };
        clicked = false;
    });
};

$("#myDiv").click(function() {
    alert('clickOn');
});

$("#myDiv").clickOff(function() {
    alert('clickOff');
});