javascript 绑定和取消绑定悬停，根据窗口大小单击事件

Posted 2021-05-03

jQuery(document).ready(function() {
    // Bind hover event on load, above 600px res
    if (jQuery(window).width() > 600) {  
        jQuery(".mega-menu-item.mega-menu-item-has-children").bind({
            mouseenter: function() {
                jQuery(this).toggleClass('mega-toggle-on');
            },
            mouseleave: function() {
                jQuery(this).toggleClass('mega-toggle-on');
            }
        });
    // Bind click event on load, lower or equal to 600px res
    } else if (jQuery(window).width() <= 600) {  
        jQuery(".mega-menu-item.mega-menu-item-has-children").bind({
            click: function() {
                jQuery(this).toggleClass('mega-toggle-on');
                return false;
            }
        });
    }
    // Window resize function
    jQuery(window).resize(function(){    
        // Unbind mouse hover events when the screen is equal to or below 600px and bind the click event
        if (jQuery(window).width() <= 600) {  
             jQuery(".mega-menu-item.mega-menu-item-has-children").unbind("mouseenter mouseleave");
             jQuery(".mega-menu-item.mega-menu-item-has-children").bind({
                click: function() {
                    jQuery(this).toggleClass('mega-toggle-on');
                    return false;
                }
            });
        }
        // Unbind click event and bind the mouse hover events above 600px res
        else {
            jQuery(".mega-menu-item.mega-menu-item-has-children").unbind("click");
            jQuery(".mega-menu-item.mega-menu-item-has-children").bind({
                 mouseenter: function() {
                    jQuery(this).toggleClass('mega-toggle-on');
                 },
                 mouseleave: function() {
                    jQuery(this).toggleClass('mega-toggle-on');
                 }
            });
        }
    });
});