仅当屏幕尺寸为一定宽度时才希望该功能起作用

Question

当屏幕为1024或更大的屏幕时，我的登录页面具有左侧导航，但是当屏幕低于1024时，左侧导航出现在页面主要内容的顶部，并且“沃尔玛杠杆成为单击后的按钮”事件，直到其余的导航停止下来，代码才起作用，直到我放置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

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

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