[英]element css follows jquery declaration, not stylesheet
我最初在我的.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)首先通过动画处理点击,然后(在动画结束时)向面板添加或删除“折叠”类并删除动画留下的内联样式:
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>.
警告,这段代码是UNTESTED 。 这只是为了表明一个想法。
由于您使用的是jQuery Animate,因此元素样式将直接接收宽度值。
像这样:
<el id="mainpanel" style="width: 500px">
除非您使用,否则它将始终覆盖元素上的任何css!重要说明:
width: 100px !IMPORTANT;
http://codepen.io/rafaelcastrocouto/pen/suEHn(DEMO )
请注意,您应该避免这种情况,因为如果需要,您将无法更改此设置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.