如何使用悬停动画关闭下拉列表

Question

我有这段代码用于导航栏下拉动画。如何在悬停时看到它。问题出在电话上，我可以打开下拉列表，但无法关闭。

我怎样才能更改它在手机上的工作代码？

感谢

$(document).ready(function(){
$(".dropdown").hover(            
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop( true, true ).slideDown("fast");
$(this).toggleClass('open');        
},
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop( true, true ).slideUp("fast");
$(this).toggleClass('open');       
}
);
});

Answer 1

您可以在移动中使用Handel的点击事件

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
$(document).on("click ", function(e) {
var container = $(".dropdown-menu");
// if the target of the click is the container
if (container.is(e.target) && container.has(e.target).length > 0) {
container.hide();
}
});
} else {
$(document).ready(function() {
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideDown("fast");
$(this).toggleClass('open');
},
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideUp("fast");
$(this).toggleClass('open');
}
);
});
}

我更改代码以检查手机。