Question

我对javaScript / jquery很新。我编写了以下代码来切换移动导航，但我确信有一种简单的方法可以将以下代码块组合在一起。我很感激建议如何写这个更好，更时尚的方式。感谢

$(document).ready(function(){
var width = $(window).width();
    if(width <=500){
        $("nav").addClass("mobile").removeClass("desktop");
    }
    else{
        $("nav").removeClass("mobile").addClass("desktop");
    }

});

$(document).ready(function(){
  $(window).resize(function(){
    var width = $(window).width();
    if(width <=500){
        $("nav").addClass("mobile").removeClass("desktop");
    }
    else{
        $("nav").removeClass("mobile").addClass("desktop");
    }
});});

Answer 1

只需创建一个函数并调用它两次：

function changeClasses() {
    var width = $(window).width();
    if(width <=500){
        $("nav").addClass("mobile").removeClass("desktop");
    }
    else{
        $("nav").removeClass("mobile").addClass("desktop");
    }
}

$(document).ready(changeClasses);
$(window).resize(changeClasses);

Answer 2

也许最好使用css媒体查询...

@media screen and (max-width: 500px){
    .desktop {
        width: or another rules...
    }
}

Answer 3

你可以把它变成一个单独的功能，它会稍微清理一下：

function toggleClass() {
    var width = $(window).width();
    if(width <=500) {
        $("nav").addClass("mobile").removeClass("desktop");
    } else {
        $("nav").removeClass("mobile").addClass("desktop");
    }
}

$(document).ready(function(){
    toggleClass();
});

$(window).resize(function(){
    toggleClass();
});

Answer 4

您可以随时在调整大小时添加事件，然后触发调整大小事件。我在事件中添加了一个命名空间，以便在触发它时不会与任何其他窗口调整大小事件冲突。

$(window).on('resize.load', function() {
  var isMobile = $(window).width() < 500;
  $("nav").toggleClass("mobile", isMobile).toggleClass("desktop", !isMobile);
}).trigger('resize.load');

https://jsfiddle.net/r6myh0z8/

编写以下jquery的更好方法

4 个答案: