Question

我有一个左侧导航div，通过媒体查询隐藏在＆lt; 768和显示在＆lt; 768.当您单击过滤器按钮时，它使用JQuery通过show（）/ hide（）切换左侧导航的显示。当窗口调整大小＆gt; = 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）在单击任何内容之前，在300px以下和几次以上调整结果视口的宽度几次，您将看到一切按计划运行。在300px下，按钮亮起，NavLeft div隐藏。超过300px，Button隐藏，NavLeft显示

2）将结果视口的大小调整为300px以下，然后单击“按钮”链接。应该出现NavLeft div。好。

3）将结果视口的大小调整为300px以上并隐藏Button。好。

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规则更具特异性。

＆＃13;

$(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'));
});

＆＃13;

#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;
  }
}

＆＃13;

<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>

＆＃13;

演示：Fiddle

媒体查询与$（window）.resize（）冲突

2 个答案: