javascript - 下拉菜单关闭掉 Angular 图标

Question

我有一个代码 java 脚本代码用于 joomla 作为悬停下拉菜单，现在我想更改代码以单击但是当我单击向下 Angular 时它打开菜单但是当关闭时我必须单击相同的 Angular 否则它不会关闭菜单，如何更改 javascript 代码以单击网站正文中的任意位置以关闭菜单。

<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('hover', 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('touchstart', function(){
			$('.mod-languages .dropdown-menu').toggle();
		});
	}
});
</script>

/* =============== LANGUAGE - DROPDOWN MENU =============== */
.mod-languages {
    display: inline-block;
    float: right;
    font-family: Roboto;
    font-size: 12px;
    margin-left: 0;
    margin-right: 10px;
    margin-top: -5.5px;
    padding: 0 14px;
    position: relative;
}
.mod-languages.open {
    background: #fff none repeat scroll 0 0 !important;
}
.mod-languages a.dropdown-toggle {
    color: #4d4d4d;
    display: block;
    line-height: 46px;
}
.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(10px, 0px) !important;
} 

Answer 1

尝试添加此元素，或使用带有 dropdown-toggle 的不同元素。 (也许是一个按钮)

.mod-languages a.dropdown-toggle {
   width: 100%;
   text-align: center;
}

或

.mod-languages ul.dropdown-menu li.dropdown-toggle {
   /* Enter your css here */
}