在iPad和iPhone等触摸屏设备上,jQuery Superfish菜单/悬停问题可能会导致用户体验不佳。为了解决这个问题,您可以考虑以下几种方法:
@media (hover: none) and (pointer: coarse) {
.sf-menu {
display: block;
}
.sf-menu li {
position: relative;
}
.sf-menu ul {
display: none;
}
}
if ('ontouchstart' in window) {
// 触摸屏设备
$('.sf-menu').superfish('disable');
} else {
// 非触摸屏设备
$('.sf-menu').superfish();
}
touchstart
和touchend
)来模拟悬停效果。例如,您可以使用以下代码:$('.sf-menu > li').on('touchstart', function() {
$(this).siblings().removeClass('sfHover');
$(this).addClass('sfHover');
}).on('touchend', function() {
setTimeout(function() {
$('.sf-menu > li').removeClass('sfHover');
}, 100);
});
总之,要解决iPad和iPhone等触摸屏设备上的jQuery Superfish菜单/悬停问题,您可以使用CSS媒体查询、JavaScript检测触摸设备、触摸事件或第三方插件来实现更好的用户体验。
领取专属 10元无门槛券
手把手带您无忧上云