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

您应该使用类而使用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);

Answer 2

好的，我想我得到你要做的......

您希望上下动画元素，但在较小的屏幕上保持固定在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');
});

Answer 3

添加：

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

这将覆盖JS的内联样式

Answer 4

好的，我从顶部阅读了整个问题和一些评论。如你想要你的 css 和 jQuery 一样，我认为这是不可能的。你可以同时拥有两种风格，而不是两种风格。我想你想要这样的东西

CSS

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

SCRIPT

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

jQuery函数阻止媒体查询触发

4 个答案: