使用jQuery覆盖CSS条件规则

我使用以下CSS来隐藏我的标记并显示一个标签#aside-expander，以便在浏览器宽度小于1200像素时允许用户查看它（如果需要）。使用jQuery覆盖CSS条件规则

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

当为了再次显示使用#aside-expander元素上的点击处理程序，不显示的元素。我认为这是由于对style元素使用！重要的。

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

我想知道，如果有人能够提供一个解决方案，我怎么能显示需求这个元素？我已经尝试应用！重要的我的jQuery .css功能无济于事。

来源

2013-07-01 Nick

你真的需要！重要吗？应该避免 –

另外内联样式应该重写甚至重要的样式 - 你能确定CSS是否应用于元素？检查元素检查器 - 是否应用但删除或根本没有？ – casraf

没有'！important'的内联样式不会覆盖来自样式表的重要样式。 –

正如AurelioDeRosa指出的那样，如果您确实需要!important您应该考虑采用不同的方式来实施重要的应该只作为最后的手段，主要是因为这是一种重写的痛苦。

但是，如果你一定要，来解决这个问题的方法之一是使用类作为开关从JavaScript，开启状态或关闭‐例如：

@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');

来源

2013-07-01 11:06:53 Pebbl

使用jQuery覆盖CSS条件规则

回答

相关问题