只有当屏幕尺寸为一定宽度时才希望功能正常工作

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

你不能把click事件处理程序放在window resize事件处理程序中，你应该只在点击发生时检查窗口大小

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