Question

我有一个名为jobfilter的元素，我想根据视口宽度添加一个类，即。当我将浏览器的大小调整为＆lt; 1000px时，我想将.hidden类添加到.jobfilter。

现在，我在这个链接的帮助下成功地完成了一半工作：$(window).width() not the same as media query。使用这个：

  function checkPosition() {
    if (window.matchMedia('(max-width: 767px)').matches) {
        //...
    } else {
        //...
    }
}

这是我的JSFiddle：http://jsfiddle.net/ck55Lf01/10/。

如果您调整浏览器大小并刷新页面，则jobfilter会隐藏，但我希望动态发生，而不是刷新页面，谢谢您的帮助！

Answer 1

这是我用来动态检查resize窗口宽度的一个功能，我将它包装在一个文件就绪函数中，该函数将$作为参数传递，以防止与使用$的其他javascript库可能发生的任何冲突。例如，如果你在wordpress主题或插件中使用你的函数。

Jsfiddle示例：http://jsfiddle.net/larryjoelane/ck55Lf01/24/

使用Javascript：

/*
document ready function used to prevent conflict with other javascript libraries
that use the $ parameter
*/
jQuery(document).ready(function($){

     //get the window width
     var winWidth =  $(window).width();

      //set the maxWidth
     var maxWidth = 1000;

          //if the window width is less than the maxWidth pixels on document loading
          if(winWidth < maxWidth){//begin if then

            //add the class hidden to .jobFilter         
            $(".jobfilter").addClass("hidden");

         }//end if then



$(window).resize(function(){//begin resize event


    //get the window width
     var winWidth =  $(window).width();

      //set the maxWidth
     var maxWidth = 1000;    


         //if the window width is less than maxWidth pixels
         if(winWidth < maxWidth){//begin if then

            //add the class hidden to .jobFilter         
            $(".jobfilter").addClass("hidden");

         }
         else{

            //remove the class hidden                 
            $(".jobfilter").removeClass("hidden");


     }//end if then else


     });//end window resize event

});//end document ready function

Answer 2

鲜为人知的事实：matchMedia有一个事件监听器：

function handleMedia(mql) {

    if (mql.matches) {
        // media query matches
    } else {
        // media query does not match
    }

}

var mql = window.matchMedia('(max-width: 767px)').addListener(handleMedia);
handleMedia(mql);

每次浏览器匹配或取消匹配媒体查询时，都会执行事件侦听器。在您的情况下，我建议手动触发处理程序（如示例所示），以确保在加载时获得正确的类集。

此示例取自MDN（尽管隐藏得非常好）。

Answer 3

你必须听resize事件。

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

Answer 4

使用resize事件检查窗口是否调整大小。使用此代码

$( window ).resize(function() {
function checkPosition() {
if (window.matchMedia('(max-width: 767px)').matches) {
    //...
} else {
    //...
}

}
}

希望这有助于你

Answer 5

$(document).ready(function(){
   DOaction(); // run function after document ready
    $(window).on('resize',DOaction); // on resize window run function
});
// function to add and remove hidden class
function DOaction(){
    if($(window).width() <= 1000){
        $(".jobfilter").addClass('hidden');
    }else{
        $(".jobfilter").removeClass('hidden');
    }
}

Jsfiddle

在浏览器调整大小（视口宽度）上动态添加类

5 个答案: