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

Question

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

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

但是我希望屏幕在移动设备响应时为768像素时，此悬停功能不起作用，并且单击功能将处于活动状态。 我已经使用了这个功能

    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);
            });

        }
    });

但是它不起作用。

Answer 1

调整大小窗口后取消绑定先前的点击事件，请尝试：

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);
        });

    }
});