Question

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

＆＃13;

<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>

＆＃13;

/* =============== 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;
}

＆＃13;

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 */
}

Answer 2

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

$(document).click(function(e){

   if($(e.target).closest('.dropdown-toggle').length != 0) 
        return false;

   $('.dropdown-toggle').hide();

});

从角度图标关闭下拉菜单

2 个答案: