Question

我有一个jQuery函数，只有在某个媒体查询为真时才会被触发（在准备好和调整大小时）。

我发现了一个很酷的技巧来检查某个媒体查询是否属实：

HTML

<div id="isthin"></div>

CSS

#isthin {
    display: inline-block;
    content: '';
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media only screen and (max-width: 1047px) {
    #isthin {
        display: none;
    }
}

的jQuery

$(document).ready(function(){
    if ( $('#isthin').is(":visible") ) {
        // function should be fired
    } else {
        // function should not be fired
    }
});

$(window).resize(function(){
    if ( $('#isthin').is(":visible") ) {
        // function should be fired
    } else {
        // function should not be fired
    }
});

单独的jQuery函数

$(function () {
      $('nav li ul').hide().removeClass('sub-nav');
      $('nav li').hover(function () {
        $('ul', this).stop().slideToggle(300);
      });
});

这是我的逻辑，但不知何故，当媒体查询发生变化时，该功能仍会在调整大小时运行。

Answer 1

根据您的代码段，我使用浏览器打开了此脚本：

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <style type="text/css">
    #isthin {
      display: inline-block;
      content: '';
      width: 1px;
      height: 1px;
      overflow: hidden;
      border: 1px solid red;
   }
   @media only screen and (max-width: 1047px) {
      #isthin {
        display: none;
      }
  }
  </style>

  <script type="text/javascript">    
    $(document).ready(function(){
      if ( $('#isthin').is(":visible") ) {
        // function should be fired
        console.log("[doc ready] Media Query wide");
      } else {
        // function should not be fired
        console.log("[doc ready] Media Query thin");
      }
   });

   $(window).resize(function(){
     if ( $('#isthin').is(":visible") ) {
        // function should be fired
        console.log("[Resize] Media Query wide");
     } else {
        // function should not be fired
        console.log("[Resize] Media Query thin");
     }
   });
</script>
</head>
  <body>
    <div id="isthin"><id>
  </body>
</html>

如果我再次将浏览器缩小和拉宽，我会看到控制台消息应该是：

[doc ready] Media Query wide 
[Resize] Media Query wide 
[Resize] Media Query wide 
[Resize] Media Query wide 
[Resize] Media Query wide 
...
...
[Resize] Media Query thin 
[Resize] Media Query thin 
[Resize] Media Query thin 
[Resize] Media Query thin 
...
[Resize] Media Query wide
...
...

因此，我认为您检测媒体查询的方式是正确的（而且复杂）。我建议你查一下：

如果是浏览器特定问题，
如何将单独的jQuery函数链接到resize回调。

然后，考虑在这种情况下，您不能通过使用CSS查询来保存一些工作。无论如何你需要调整大小的回调。所以，看看我已经看到解决这个问题的另一种优雅方式。反之亦然，避免使用CSS选择器，但做同样的事情：

$(window).resize(function(){
    if ( $(window).width() < xxxx && $(window).width() > yyyyy ) {

        $('body').addClass('phone');  // <<<<<<<<<<<<<<
        $('body').removeClass('tablet');
        $('body').removeClass('workstation');

    } else if ( ... ) {

        $('body').removeClass('phone');
        $('body').addClass('tablet');  // <<<<<<<<<<<<<<
        $('body').removeClass('workstation');

    } 
    ...
    ...
}

然后，您可以通过向选择器添加.phone，.tablet和.workstation来轻松区分CSS，并且可以删除查询。进一步：

$(window).resize(function(){
    if ($('body').hasClass('phone')) {

       ...
       ...

    } else if ( ... ) {
       ...
    } 
    ...
    ...
}

就像这样，你在JS方面拥有一切，而在CSS方面则更少。

这个想法不是我的，我在一个框架中看到它，但我不确定它是什么。

Answer 2

问题不是媒体查询本身，而是您绑定事件的方式。

当查询适合时，您在每次调整大小时绑定它。你应该真正分离你的所有功能并使用旗帜。就像那样：

var flag = true;

$(window).resize(function(){

    flag =  $('#isthin').is(":visible");

    if(flag){
        $('nav li ul').hide().removeClass('sub-nav');
    }else{
        $('nav li ul').show().addClass('sub-nav');
    }

})

$(document).ready(function(){

    $(window).trigger('resize');
})

$(function () {
    $('nav li').hover(function () {
        if(flag){
            $('ul', this).stop().slideToggle(300);
        }
    });
});

Fiddle

jQuery：仅当某些媒体查询为真时才触发Fire功能

2 个答案: