我在使用响应式菜单时遇到了问题:当浏览器大小大于 800 像素时,这是一个典型的下拉菜单,其中通过悬停打开子菜单,但是当大小小于 800 像素时,通过单击(对于手机)打开子菜单。
问题是当我以 100% 缩放打开页面时,它可以正常工作(悬停),但是当我放大(小于 800 像素)时,我的效果加倍:悬停也可以单击。如何“关闭”悬停效果并仅单击。希望这段代码能解释一切:
function checkResize() {
var ww = $(window).width();
if ( ww < 800) {
$('#main-menu-list li').on('click', function() {
if ($(this).length>0) {
$(this).children('ul').toggle();
}
});
} else {
$('#main-menu-list li').hover(function() {
$(this).children('ul').fadeIn();
},
function() {
$(this).children('ul').fadeOut(200);
}
);
};
};