在 div 之外单击时隐藏 div

Question

我尝试创建自定义 drop-down。我想让它作为默认值 drop-down 使用，就像在 div 之外单击时隐藏所有选项一样。就我尝试做到的而言，当我在 div 之外（在文档内）单击时，我可以隐藏所有选项。但是当我点击浏览器 URL 或页面标题时，drop-down 不会隐藏。

这是我的代码：https://jsfiddle.net/db82jnqv/

$(document).ready(function (){
    $("#dvStatsDate").click(function () {
        if($("#customSelectBox").is(":visible"))
           $("#customSelectBox").hide();
        else
            $("#customSelectBox").show();
    });
    
    $("#customSelectList > li").click(function (){
       $("#statsDate").text($(this).find("span").text());
        $("#customSelectBox").hide();
    });
    
    $(document).click(function(event){
        if(!$(event.target).is("#dvStatsDate,#statsDate")){
            $("#customSelectBox").hide();
        }
    });

});

.dvCustomSelect {
    width: 236px;
    display: table;
    position: relative;
}

.dvCustomSelect > div {
    display: table-cell;
}

.dvCustomSelect > div:last-child {
    width: 80%;
}

.dvCustomSelect .divSelect {
    border-radius: 3px;
    background-color: #fff;
    border: 1px solid #ccc;
}

.dvCustomSelectbox {
    position: relative;
}

.dvCustomSelectLbl > div {
    width: 100%;
    color: #555555;
    cursor: pointer;
    font-size: 14px;
    min-height: 21px;
    padding: 5px 8px;
    line-height: 20px;
    margin-bottom: 3px;
    border-radius: 3px;
    display: inline-block;
    background-color: #ffffff;
    border: 1px solid #cccccc;
}

.dvCustomSelectLbl > div i.fa {
    float: right;
}

.dvCustomSelectOptions {
    left: 0px;
    top: 100%;
    width: 204px;
    z-index: 221;
    display: none;
    margin-top: -4px;
    position: absolute;
    border-radius: 3px;
    background-color: white;
    border: 1px solid #cccccc;
}

.dvCustomSelectOptions ul {
    list-style: none;
    margin-left: 0px;
    margin-bottom: 0px;
    -webkit-padding-start: 0;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
}

.dvCustomSelectOptions ul li {
    cursor: default;
    font-size: 13px;
    padding: 2px 10px;
    background-color: white;
}

.dvCustomSelectOptions ul li:not(:last-child):hover {
    color: white;
    background-color: rgb(0, 120, 163);
}

.dvCustomSelectOptions ul li:first-child {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.dvCustomSelectOptions ul li:last-child {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='dvCustomSelect'>
  <div>Date</div>
  <div class="dvCustomSelectbox">
   <div class="dvCustomSelectLbl">
      <div id="dvStatsDate"><span id="statsDate" class="selectDate">Today</span> <i class="fa fa-sort-down"></i></div>
   </div>
   <div class="dvCustomSelectOptions" id="customSelectBox">
      <ul id="customSelectList">
         <li><span>Today</span></li>
         <li><span>Yesterday</span></li>
         <li><span>This Week</span></li>
         <li><span>Last Week</span></li>
         <li><span>This Month</span></li>
         <li><span>Last Month</span></li>
         <li><span>This Quarter</span></li>
         <li><span>Last Quarter</span></li>
         <li><span>This Year</span></li>
         <li><span>Last Year</span></li>
      </ul>
    </div>
   </div>
</div>

我希望当用户点击浏览器的任何地方时，drop-down 将被隐藏。

Answer 1

我看不出有可能完成您要求的所有事情。

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

如果放宽点击要求，则可以改为隐藏鼠标离开时的弹出窗口。如果没有，那么 A. Wolff 的答案可能与使用 jquery/javascript.

一样好

JSFIDDLE https://jsfiddle.net/seadonk/db82jnqv/4/

$("#customSelectBox").mouseleave(function(){
   $(this).hide(); 
});

还更新了您的 show/hide 逻辑以使用 .toggle

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

Answer 2

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

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

-DEMO-

Answer 3

这应该会让你到达那里。

$.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');
});

FIDDLE!

在 div 之外单击时隐藏 div

Hide a div When Clicked outside of the div

jquery

css

html-select

-DEMO-