Question

我有导航。当我到达viewport＆lt; 860px班<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

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/

Answer 2

使用功能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();
});

但是，为了优化网站的性能，您应该对出于安全原因禁用jS的浏览器使用CSS3媒体查询。请考虑阅读有关如何制作网站的文章responsive。

在视口上切换类

2 个答案: