Hide div on button click outside div
I am trying to create my own dropdown list. I want it to work as the default dropdown, how to hide all options when I clicked outside of the div. As far as I try to do this, I can hide all options when I clicked outside the div (inside the document). But when I clicked on the browser url or page title, the dropdown is not hiding.
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 the dropdown to be hidden when the user clicks anywhere in the browser.
source to share
I do not see that you can do whatever you ask.
You can use $(window).blur()
as suggested by A.Wolff, but this only works when clicking on something that can receive focus, such as entering the address bar. Just clicking on a portion of the browser window will not blur the window, so I don't think you will get this functionality with a click demand.
If you deselect the click requirement, you can simply hide the popup on the mouse background. If not, then A. Wolff's answer is probably as good as using jquery / javascript.
JSFIDDLE https://jsfiddle.net/seadonk/db82jnqv/4/
$("#customSelectBox").mouseleave(function(){
$(this).hide();
});
Also updated your show / hide logic to use .toggle
$("#dvStatsDate").click(function () {
$("#customSelectBox").toggle();
});
source to share
This should get you there.
$.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');
});
source to share