用jQuery覆盖CSS条件规则[重复]答案

【问题标题】：Overriding CSS conditional rule with jQuery [duplicate]用jQuery覆盖CSS条件规则[重复]
【发布时间】：2013-07-01 10:48:46
【问题描述】：

我正在使用以下 CSS 来隐藏我的标签并显示一个标签 #aside-expander，以便用户在浏览器宽度小于 1200 像素时根据需要查看它。

@media screen and (max-width: 1200px) {
    aside#global-widget-base {
        display: none !important;
    }
    #aside-expander {
        display: inline !important;
    }
}

当在#aside-expander 元素上使用点击处理程序以再次显示时，该元素不会显示。我认为这是由于在样式元素上使用了 !important。

$('#aside-expander').click(function() {
   $("#global-widget-base").css("display", "inline"); 
});

我想知道是否有人能够提供关于如何按需显示此元素的解决方案？我已经尝试将 !important 应用于我的 jQuery .css 函数，但无济于事。

【问题讨论】：

你真的需要 !important 吗？应该避免
内联样式也应该覆盖甚至重要的样式——你能确保css完全应用于元素吗？检查元素检查器 - 它是应用但被删除还是根本不存在？
没有!important 的内联样式不会覆盖来自样式表的重要样式。
使用attr 替换样式属性的快速而肮脏的解决方案。 jsfiddle.net/V77cb

标签： jquery html css

【解决方案1】：

正如 AurelioDeRosa 所说，如果您真的需要 !important，您可能应该考虑一种不同的方式来实现您所拥有的东西 - 重要的是真的应该作为最后的手段保留，主要是因为覆盖它是如此痛苦。

但是，如果必须，解决此问题的一种方法是使用类作为 javascript 的开关，以打开或关闭状态 &dash;例如：

@media screen and (max-width: 1200px) {
  aside#global-widget-base {
    display: none !important;
  }
  #aside-expander {
    display: inline !important;
  }
  aside#global-widget-base.hide-disabled {
    display: block !important;
  }
}

然后在您的 JavaScript 中，您只需添加或删除 hide-disabled 类。显然，这可以根据您的喜好进行定制，并取决于情况的要求。我通常更喜欢从 html 元素向上工作，所以我的 JavaScript 会切换页面的“模式”，但这应该只用于与整个页面相关的效果，而不是特定的东西。

var states = 'full-collapse half-collapse no-collapse';

// remove all collapsing
$('html').removeClass(states).addClass('no-collapse');

// add collapse back
$('html').removeClass(states).addClass('full-collapse');

【讨论】：