jQuery功能可以防止媒体查询触发

我在CSS中有几个媒体查询来改变HTML元素的一些属性。其中一个元素是名为.downloads的div，其中一个正在改变的属性是.downloads的高度。jQuery功能可以防止媒体查询触发

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

我也有一个jQuery的功能，操纵上的另一个操作的用户做的.downloads高度。

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

问题是，在jQuery函数之后，媒体查询不再工作。我认为这是因为height在jQuery函数触发后被放入内联。

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

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

来源

2014-10-09 supersize

您可以添加'！important'到CSS规则重写jQuery的直列之一。 – emmanuel 2014-10-09 18:27:14

@emmanuel说，你需要使用'！important'，因为jQuery风格的DOM内联和作为内联样式（默认情况下）具有最高优先级，它的风格是生效 – 2014-10-09 18:29:23

，但是当我把一个重要的每个媒体查询jQuery函数不再起作用，意味着如果函数被调用，它不会改变高度！ – supersize 2014-10-09 18:39:48

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

你想要上下动画元素，但在小屏幕上保持固定在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; 
    } 
}

记者：那么，您可以在媒体查询规则禁止类属性

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

来源

2014-10-09 19:13:26 LcSalazar

地址：

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

这将覆盖JS的内嵌样式

来源

2014-10-09 18:27:34 jmore009

，但似乎jQuery功能不再有效果。当我这样做时，它不会改变jQuery的高度 – supersize 2014-10-09 18:37:34

您应该使用一个类来代替，而使用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);

来源

2014-10-09 18:31:03 streetlogics

好吧，我读了整个问题和一些顶端的评论很少。正如你想要你的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);

来源

2014-10-09 20:34:04

jQuery功能可以防止媒体查询触发

回答

相关问题