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 () {
    $("#customSelectList > li").click(function (){

.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 class="dvCustomSelectbox">
   <div class="dvCustomSelectLbl">
      <div id="dvStatsDate"><span id="statsDate" class="selectDate">Today</span> <i class="fa fa-sort-down"></i></div>
   <div class="dvCustomSelectOptions" id="customSelectBox">
      <ul id="customSelectList">
         <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>

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

Source: css3

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.