Thread: Menu Dropdown Close by clicking outside the menu

Hello,

Here is my JavaScript code and CSS code in my website www.mfa.pw; there is an Issue, when I click on the menu the drop down menu toggle out but in order to toggle in the menu I have to click on the menu to get it hide, how to change the the javascript so that i click anywhere in the page the drop down menu get closed.

Code:

   <script type="text/javascript">
jQuery(document).ready(function($) {
	var ua = navigator.userAgent,
	_device = (ua.match(/iPad/i)||ua.match(/iPhone/i)||ua.match(/iPod/i)) ? "smartphone" : "desktop";
	if(_device == "desktop") {
	$(".mod-languages").bind('click', function() {
			$(this).children(".dropdown-toggle").addClass(function(){
				if($(this).hasClass("open")){
					$(this).removeClass("open");
					return "";
				}
				return "open";
			});
			$(this).children(".dropdown-menu").slideToggle();
		});
	}else{
         $('.mod-languages .dropdown-toggle').bind('click', function(){
			$('.mod-languages .dropdown-menu').hide(300);
		});
	}
});
</script>

Code:

/* =============== LANGUAGE - DROPDOWN MENU =============== */
.mod-languages {
    display: inline-block;
    float: right;
    font-family: Roboto;
    font-size: 12px;
    font-weight: 400;
    margin-left: -0.5px;
    margin-right: 10px;
    margin-top: 0px;
    padding: 0 19px;
    position: relative;
}
.mod-languages.open {
    background: #fff none repeat scroll 0 0 !important;
}
.mod-languages a.dropdown-toggle {
    color: #4d4d4d;
    display: block;
    line-height: 33px;
}
.mod-languages a.dropdown-toggle.open {
    background: #fff none repeat scroll 0 0 !important;
}
.mod-languages ul.dropdown-menu {
    background: #1F4897 none repeat scroll 0 0;
    border: medium none;
    border-radius: 0;
    box-shadow: none;
    max-height: 85px;
    min-width: 100%;
    padding: 0 !important;
}
.mod-languages ul.dropdown-menu li {
    margin: 0;
    text-align: center;
}
.mod-languages ul.dropdown-menu li a {
    background: #fff;
    font-size: 12px;
    padding: 4px 15px;
}
.mod-languages ul.dropdown-menu li a img {
    float: left;
    margin-right: 9px;
    margin-top: 4px;
}
.mod-languages ul.dropdown-menu li a:hover {
    background: rgba(81, 99, 175, 0.6) none repeat scroll 0 0;
}
.mod-languages:hover {
    background-color: #fff;
}
.mod-languages:hover a.dropdown-toggle {
    color: #4d4d4d;
}
.fa-lng {
    transform: translate(14px, 0px) !important;
}