javascript - 只希望该功能在屏幕尺寸为一定宽度时起作用

Question

我的这个着陆页在屏幕为 1024 或更大时有一个左侧导航，但是当屏幕低于 1024 时，左侧导航出现在页面主要内容的顶部，并且“Walmart Leverage 变成了一个按钮带有单击事件以使其余导航下降。在我放置 if 语句以检测屏幕大小之前，代码一直有效。代码可能遗漏了一些内容。下面是该页面的链接。

http://dl.dropboxusercontent.com/u/2399619/walmartmilitary/talentbrew-LeverageHome.html

这是 jQuery 的代码

$(window).resize(function() {
if( $(this).width() < 1024) {       

var $showSubBtn = $("#sn-walmartleverage");

    $showSubBtn.click(function(){

            if($(this).hasClass("active")) {            
                $(this).parent().next().hide();
                $(this).removeClass("active");

            } else {            
                $(this).addClass("active");
                $(this).parent().next().show();         
            }           
            return false;           
        });         
    }   
});

任何帮助将不胜感激。

谢谢

Answer 1

您不能将点击事件处理程序放在窗口调整大小事件处理程序中，您应该在点击发生时检查窗口大小

$("#sn-walmartleverage").on('click', function(e){
    e.preventDefault();
    if ($(window).width() > 1024) {
        $(this).toggleClass('active').parent().next().toggle();
    }
});