Hide a div When Clicked outside of the div

I try to create a custom drop-down. I want to make it works as default drop-down like hide all the option when i clicked outside of the div. As far as i try to make it, i can hide all option when i clicked outside of the div (inside the document). But when i clicked on Browser URL or Title of the page, drop-down doesn’t hide.

Here is my Code: 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>

I want that when user clicked on anywhere of Browser, drop-down will be hide.


Source: css3

Leave a Reply