Use the jQuery on() method
You can use the jQuery click() method in combination with the on() method to hide the dropdown menu when the user click outside of the trigger element.
Let's take a look at the following example to understand how it basically works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Hide Dropdown on Click Outside</title>
<style>
ul{
padding: 0;
list-style: none;
background: #f2f2f2;
}
ul li{
display: inline-block;
position: relative;
line-height: 21px;
text-align: left;
}
ul li a{
display: block;
padding: 8px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover{
color: #fff;
background: #939393;
}
ul li ul.dropdown-menu{
min-width: 100%; /* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 0;
}
ul li ul.dropdown-menu li{
display: block;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
// Show hide popover
$(".dropdown").click(function(){
$(this).find(".dropdown-menu").slideToggle("fast");
});
});
$(document).on("click", function(event){
var $trigger = $(".dropdown");
if($trigger !== event.target && !$trigger.has(event.target).length){
$(".dropdown-menu").slideUp("fast");
}
});
</script>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropdown">
<a href="#">Products ▾</a>
<ul class="dropdown-menu">
<li><a href="#">Laptops</a></li>
<li><a href="#">Monitors</a></li>
<li><a href="#">Printers</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
