使用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條件規則

回答

相關問題