媒体查询与 $(window).resize() 冲突

Question

我有一个左侧导航 div，它通过媒体查询隐藏在 < 768 处，还有一个过滤器按钮显示在 < 768 处。当您单击过滤器按钮时，它使用 JQuery 来切换通过 show()/hide() 显示左侧导航。当 window 调整大小时 >= 768 我使用 JQuery 将左侧导航的显示设置回显示。

正如我所说，当 window 宽度低于 768 时，我的媒体查询处理隐藏左侧导航，但问题是它仅在我没有单击过滤器按钮时才会触发。一旦我将它的大小调整到 768 以下，然后单击过滤器按钮将其打开，然后再次单击它以将其关闭，然后将其调整到 768 以上，然后向下移动，左侧导航仍然存在。这就像媒体查询不再适用于 display:none 属性。我在媒体查询中更改了其他 css 属性，例如宽度和颜色，它们仍然有效，但它不再隐藏 div.

我简化了代码来说明问题。

HTML

<a href="" id="filterButton">Button</a>
<div id="navLeft">NavLeft</div>

CSS

#navLeft {
    background-color:orange;
}
#filterButton {
    background-color:silver;
    display: none;
}

@media only screen and (max-width: 300px) {
#navLeft {
    display: none;
    }
#filterButton {
    display: inline;
    }
}

JS

$(window).resize(function()
    {
    var $theWindowSize = $(this).width();
    if($theWindowSize > 300)
        {
        $('#navLeft').show();
        }
    });

// Filters
$('#filterButton').bind('click',function(event)
    {
    event.preventDefault();

    if ($('#filterButton').hasClass('filtersActive'))
        {
         $('#navLeft').hide();
         $('#filterButton').removeClass('filtersActive');
        }
    else
        {
        $('#navLeft').show();
        $('#filterButton').addClass('filtersActive');
        }
    });

这是 fiddle。要复制该行为，请按照以下步骤操作。

https://jsfiddle.net/athcy8fL/

1) 在单击任何内容之前将结果视口的宽度多次调整为 300 像素以下和以上，您将看到一切按计划进行。在 300 像素以下，按钮出现并且 NavLeft div 隐藏。超过 300px，Button 隐藏，NavLeft 显示

2) 将结果视口的大小调整到 300 像素以下，然后单击按钮 link。 NavLeft div 应该会出现。好

3) 将结果视口的大小调整到 300 像素以上，然后隐藏按钮。好

4) Result viewport 的大小低于 300px，NavLeft 应该隐藏但它没有。不好。

为什么在使用 Javascript 改变其显示后媒体查询不起作用属性？

Answer 1

问题是，当您在一个不可见的元素中调用 .show() 时，jquery 将添加一个内联样式来显示该元素并覆盖您的 css，从而导致媒体查询不起作用。

我稍微修改了您的代码以考虑内联样式优先级 http://jsfiddle.net/yjs3fou7/

基本上我更改了调整大小功能：

$(window).resize(function()
{
var $theWindowSize = $(this).width();
if($theWindowSize > 300)
    {
        $('#navLeft').show();
        $('#filterButton').removeClass('filtersActive')
    } else {
        if (!$('#filterButton').hasClass('filtersActive'))
            $('#navLeft').hide();
    }
});

根据 css specificity 规则，内联样式比 id 或 class 样式具有更高的优先级，所以一旦你开始从 javascript 开始操作，你必须记住它可能会导致您的 css 停止应用

Answer 2

问题是内联样式的使用比 css 规则更具体。

$(window).resize(function() {
  var $theWindowSize = $(this).width();
  if ($theWindowSize > 300) {
    $('#navLeft').removeClass('show');
    $('#filterButton').removeClass('filtersActive');
  }
});

// Filters
$('#filterButton').bind('click', function(event) {
  event.preventDefault();
  $('#filterButton').toggleClass('filtersActive');

  $('#navLeft').toggleClass('show', $('#filterButton').hasClass('filtersActive'));
});

#navLeft {
  background-color: orange;
}
#filterButton {
  background-color: silver;
  display: none;
}
@media only screen and (max-width: 300px) {
  #navLeft {
    display: none;
  }
  #filterButton {
    display: inline;
  }
  #navLeft.show {
    display: block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="" id="filterButton">Button</a>
<div id="navLeft">NavLeft</div>

演示：Fiddle

媒体查询与 $(window).resize() 冲突

Media Query conflicts with $(window).resize()

javascript

jquery

css

media-queries