元素 css 遵循 jquery 声明，而不是样式表

Question

我最初在我的 .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');
      }
});

当我将窗口大小调整到超过 901 像素时，它仍然遵循 jQuery 的最新声明，而不是 901 像素样式表中的 CSS 声明。

如何在调整窗口大小时优先考虑 CSS 声明？
或者你如何更好地处理这个问题？

请不要让我永远依赖 $(window).resize() 事件 :) 这无视 CSS。

Answer 1

** 编辑 **

如果您想优先考虑 CSS 并且仍然能够对其进行动画处理，您可能需要的是：

http://jsfiddle.net/2Fe22/1/

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>.

警告，此代码未经测试。只是为了展示一个想法。

Answer 2

由于您使用的是jQuery Animate，元素样式将直接接收宽度值。

像这样：

<el id="mainpanel" style="width: 500px">

这将始终覆盖元素上的任何 css，除非您使用 !IMPORTANT:

width: 100px !IMPORTANT;  

http://codepen.io/rafaelcastrocouto/pen/suEHn（演示）

请注意，您应该避免这种情况，因为如果需要，您将无法更改。