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

Question

I have this landing page that has a left navigation when it the screen with 1024 or larger but when the screen goes below 1024 the left navigation appears on the top of the main content of the page and the "Walmart Leverage becomes a button with on click event for the rest of the navigation to come down. the code works until I put the if statement to detect what size the screen is. Probably missing something to the code. Below is the link for the page.

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

This is the code for the 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;           
        });         
    }   
});

Any help would be much appreciated.

Thanks

Answer 1

You can't put the click event handler inside the window resize event handler, you should just check the window size when the click happens

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