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

Question

我有一个左侧导航 div，它通过媒体查询隐藏在 = 768 时，我使用 JQuery 将左侧导航的显示设置回显示。

正如我所说，当窗口宽度低于 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');
        }
    });

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

https://jsfiddle.net/athcy8fL/

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

2) 将结果视口调整为 300 像素以下，然后单击按钮链接。 NavLeft div 应该会出现。很好。

3) 将结果视口的大小设置为 300 像素以上，按钮隐藏。很好。

4) 将结果视口的大小设置为 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 或类样式具有更高的优先级，因此一旦您开始从 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