jQuery函数防止媒体查询触发

Question

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

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

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