jQuery函数防止媒体查询触发答案

【问题标题】：jQuery function prevents media queries to triggerjQuery函数防止媒体查询触发
【发布时间】：2014-10-10 04:46:52
【问题描述】：

我的 CSS 中有一些媒体查询来更改 HTML 元素的某些属性。其中一个元素是一个名为.downloads 的div，其中一个正在改变的属性是.downloads 的高度。

@media (max-width: 764px) {
  .downloads {
      height: 500px;
  }
}

我还有一个 jQuery 函数，它可以在用户执行的另一个操作上操纵 .downloads 的高度。

$('.downloads').animate({'height': 250}, 500);

问题是，在 jQuery 函数之后，媒体查询不再起作用。我假设是这样，因为height 在触发 jQuery 函数后被内联放置。

<div class="downloads" style="height: 250px;"></div>

对这个问题有什么想法吗？谢谢

【问题讨论】：

您可以在 css 规则中添加 !important 以覆盖 jquery 内联项。
正如@emmanuel 所说，您需要使用!important，因为jQuery 对DOM 进行内联样式，并且内联样式（默认情况下）具有最高优先级，它是生效的样式
但是当我对每个媒体查询添加一个 !important 时，jQuery 函数不再起作用，这意味着如果调用该函数，它不会改变高度！
@supersize - 你预计会发生什么？
@LcSalazar 这是一个讽刺的问题吗？我希望我的函数能够正常工作，并且媒体查询能够正常工作。

标签： jquery html css media-queries

【解决方案1】：

好的，我想我明白了你想要做什么......

您希望上下动画元素，但在较小的屏幕上时保持固定在500px。因此，您不应该使用 JQuery，因为它会为元素添加内联样式，并且您将无法控制它与媒体查询规则的混合...

相反，添加/删除将具有height 动画的类，并使用 JQuery 切换它。然后，您可以禁用媒体查询规则上的类属性：

Something like this

CSS：

.downloads {
    height: 0px;
    transition: 0.5s;
    overflow: hidden;
    border: 1px solid red;
}

.downloads.change {
    height: 250px;
}

@media (max-width: 764px) {
  .downloads,
  .downloads.change {
      transition: none;
      height: 500px;
  }
}

JS：

$('button').on('click', function() {
    $('.downloads').toggleClass('change');
});

【讨论】：

【解决方案2】：

您应该改用一个类并使用 jQuery UI “添加类”方法 - http://api.jqueryui.com/addClass/

.small-height{
  height: 250px;
}

@media (max-width: 764px) {
  .downloads, .small-height {
      height: 500px;
  }
}

还有 JS：

$('.downloads').addClass('small-height', 500);

【讨论】：

【解决方案3】：

添加：

@media (max-width: 764px) {
  .downloads {
    height: 500px !important; //<--
  }
}

这将覆盖 JS 的内联样式

【讨论】：

但后来似乎jQuery函数不再起作用了。当我这样做时，它不会用 jQuery 改变高度

【解决方案4】：

好的，我从顶部阅读了整个问题和一些 cmets。由于您希望 css 和 jQuery 都能正常工作，我认为这是不可能的。您可以同时拥有任何一种风格，但不能同时拥有两种风格。我想你想要这样的东西

CSS

   @media (max-width:764px){
         .downloads{
              height:500px !important;
         }
    }

脚本

   if($('.downloads').length>1){
        $(this).removeClass('downloads');
        $(this).animate({'height':250},500);
      }
    else 
        $(this).animate({'height':250},500);

【讨论】：