我最初在我的 .css 样式表中有这个:
@media only screen and (min-width: 901px){
#main_panel {
width: 750px;
}
}
@media only screen and (min-width: 300px) and (max-width: 900px), handheld {
#main_panel {
width: 500px;
}
}
然后在一些用户交互之后,这个 jQuery 命令改变了这个 CSS 值:
$("#collapse").click(function() {
if ((($(window).width()) >= 600) && ($(window).width() <= 900)) {
$("#main_panel").animate({width: "500px"}, 'slow');
}
});
当我将窗口的大小调整到超过 901px 时,它仍然遵循 jQuery 最近的声明,而不是 901px 样式表中的 CSS 声明。
如何在调整窗口大小时确定 CSS 声明的优先级?
或者你如何更好地处理这个问题?
请不要让我永远依赖 $(window).resize() 事件 :) 这无视 CSS。
最佳答案
** 编辑 **
如果你想优先考虑 CSS 并且仍然能够对其进行动画处理,你可能需要的是:
1) 创建一个“普通”面板类并设置样式
.panel {width:750px;height:400px}
2) 创建一个折叠类并设置样式
.collapsed {width:500px}
3) 创建一个函数来从 css 中读取折叠宽度和正常宽度:
function getClassWidth(aClass) {
return parseInt($("<div />").addClass(aClass).css('width'));
}
4) 首先通过动画处理点击,然后(在动画结束时)向面板添加或删除“collapsed”类并删除动画留下的内联样式:
var collapsed=false;
$("#collapse").click(function() {
collapsed=!collapsed;
if(collapsed) {
$("#main_panel").animate({width: (getClassWidth('collapsed'))+"px"}, 'slow',afterAnimation);
} else {
$("#main_panel").animate({width: (getClassWidth('panel'))+"px"}, 'slow',afterAnimation);
}
});
function afterAnimation() {
if(collapsed) $("#main_panel").addClass( "collapsed" ).removeAttr("style");
else $("#main_panel").removeClass( "collapsed" ).removeAttr("style");
}
你这样做,所以如果用户调整窗口大小并且 css 改变你的屏幕更新正确。
** 旧帖(供引用) **
如果您使用 JQuery 设置大小,您可以继续以这种方式设置它们:
var collapsed=false;
$( window ).resize(calculateNewSizes); // When resized
calculateNewSizes(); // At startup
function calculateNewSizes() {
if(collapsed) {
// if screen width < xxx set elemt width to yyy, etc.. collapsed version
} else {
// if screen width < xxx set elemt width to yyy, etc..
}
}
// This toggles the collapsed state if user clicks on an element
$("#collapse").click(function() {
collapsed=!collapsed;
calculateNewSizes(); // or do the animation here
});
在所有要调整大小的元素开始之后,应尽快调用此脚本以避免FOUC。 .
<div class="to be resized">
<script>
//do the $( window ).resize(...) here
</script>
... all other stuff </div>.
警告,此代码未经测试。只是为了展示一个想法。
关于javascript - 元素 css 遵循 jquery 声明,而不是样式表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21306855/