調整窗口寬度時刪除類和樣式標記

Question

我想從窗口大小大於1000px時的#menu ul元素和#style2元素中刪除類showMenu。

我的代碼：

$(function() { 
    if (window.screen.width > 1000) { 
    $("#menu ul").removeClass("showMenu"); 
    $("#menuicon").removeClass("active"); 
    $("#style2").remove(); 
    } 
}); 

我不知道爲什麼它會立即刪除一切，不是屏幕調整到1001PX後...

Answer 1

因爲它在屏幕上唯一一次寬度，經過檢查加載。要每次都使這項工作時，屏幕大小，這也在裏面去$(window).resize()：

更新：您需要檢查與window.innerWidth不window.screen.width。

$(function() { 
    $(window).resize(function() { 
    if (window.innerWidth > 1000) { 
     $("#menu ul").removeClass("showMenu"); 
     $("#menuicon").removeClass("active"); 
     $("#style2").remove(); 
    } 
    }); 
}); 

我也相信你想將其恢復一旦成爲常態：

$(function() { 
    $(window).resize(function() { 
    if (window.innerWidth > 1000) { 
     $("#menu ul").removeClass("showMenu"); 
     $("#menuicon").removeClass("active"); 
     $("#style2").remove(); 
    } else { 
     $("#menu ul").addClass("showMenu"); 
     $("#menuicon").addClass("active"); 
     $("#style2").remove(); // I don't know how to do this! `:P` 
    } 
    }); 
});