在视口上切换 class

Question

我有我的导航。当我到达视口 < 860px 时，class <nav class="nav" 需要 <nav class="nav-mobile" 我走得很远，但真的需要摆脱``class="nav"。下面的脚本只添加 nav-mobile 但不删除 class="nav".

    $(window).on('resize', function () {
        $('.nav').toggleClass('nav-mobile', $(window).width() < 860);
    });

Answer 1

使用函数 addClass 和 removeClass。

function setSize(){
  if($(window).width() < 860){
    $('.nav').addClass("nav-mobile");
    $('.nav-mobile').removeClass("nav");
  }
  else{
    $('.nav-mobile').addClass("nav");
    $('.nav').removeClass("nav-mobile");
  }

}
$(document).ready(function () {
  setSize();
});
$(window).on('resize', function () {
  setSize();
});

但是，为了让您的网站正常降级，您应该 CSS3 出于安全原因禁用 jS 的浏览器使用媒体查询。考虑阅读有关如何制作网站的文章 responsive。

Answer 2

jQuery解法

function appResize()
{
   if($(window).width() < 860){
        $('nav').addClass("nav-mobile");
        $('nav').removeClass("nav");
      }
      else{
        $('nav').removeClass("nav-mobile");
        $('nav').addClass("nav");
      }
}

$(function(){
appResize();
})

$(window).on('resize', function () {
  appResize();
});

工作演示http://jsfiddle.net/7fs7xrma/1/

CSS3解决方案使用CSS media queries

html

<nav class="nav"></nav>

css

.nav{
     background:red; 
     height:20px;
    }

@media screen and (max-width : 860px){
.nav{
    background:blue;
    }
}

jsFiddle 演示 http://jsfiddle.net/7fs7xrma/2/

在视口上切换 class

Troggle class on viewport

jquery

viewport

window-resize