如何从移动响应屏幕中删除悬停功能

How to remove hover function from mobile responsive screen

本文关键字:删除 悬停 功能 屏幕 响应 移动      更新时间:2023-09-26

窗口正常屏幕时使用悬停功能

jQuery(".main-menu ul li").hover(
    function() {
        jQuery(this).children("ul").slideToggle(1000);
    }

但是我希望当屏幕为768px时,移动响应此悬停功能不起作用,单击功能将激活。我用过这个函数

    jQuery(window).resize(function() {
        var screenWidth = jQuery(window).width();
        if(screenWidth <= 768){
            jQuery(".main-menu ul li").click(function() {
                jQuery(this).children("ul").slideToggle(1000);
            });
        }
    });

但它不起作用。

调整窗口大小后尝试取消绑定上一个单击事件:

jQuery(window).resize(function() {
    $( ".main-menu ul li").unbind();
    var screenWidth = jQuery(window).width();
    if(screenWidth <= 768){
        jQuery(".main-menu ul li").click(function() {
            jQuery(this).children("ul").slideToggle(1000);
        });
    }
});