关闭下拉菜单的角度图标

Closing of the Drop Down Menu out of the angle Icon

本文关键字：图标 下拉菜单      更新时间：2023-09-26

我有一个用于 joomla 作为悬停下拉菜单的代码 java 脚本代码，现在我想更改要单击的代码，但是当我单击向下角度时它会打开菜单，但在关闭时我必须单击相同的角度，否则它不会关闭菜单，如何更改 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;
}

尝试添加这个，或者在dropdown-toggle中使用不同的元素。（也许是一个按钮）

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

或

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

尝试以下代码。我希望它工作正常。

$(document).click(function(e){
   if($(e.target).closest('.dropdown-toggle').length != 0) 
        return false;
   $('.dropdown-toggle').hide();
});
相关文章：