從jQuery重置默認CSS

我正在使用網格佈局（Bootstrapper）以行顯示特定寬度的圖像。從jQuery重置默認CSS

<li class="span4"><div id="id" class="thumbnail"><img src="**path**"><img></div></li> 
<li class="span12"><div id="id-2" class="thumbnail"><img src="**path**"><img></div></li> 
<li class="span3"><div id="id-3" class="thumbnail"><img src="**path**"><img></div></li>

我希望能夠使圖像的寬度跨度所有列（類=「span12」），當用戶點擊圖片，然後將圖像恢復到「硬編碼」類的當用戶再次點擊圖像時的圖像。

if (current_span != 'span12') // If image is not already spanning all columns ("span12") 
{ 
$(this).attr('class','span12'); // Add class to span all columns 
}

使用上面的JS，一次點擊後圖像顯示的寬度正確。

但是，在第二次點擊時，我想回到「硬編碼」類，因爲並非所有圖像都具有相同的類別（即一些屬於「span3」，其他屬於「span4」和其他以「span12」。

有沒有辦法從第二點擊HTML恢復到「硬編碼」類？

來源

2012-08-31 cbourn

CSS類將級聯，所以最後一個隊列將覆蓋任何一項你應該可以簡單地用jQuery打開/關閉「span12」類：

$(this).toggleClass('span12');

來源

2012-08-31 08:40:19 Dunhamzzz

我很欣賞你的答案， toggleClass不會對圖像寬度（跨度）產生影響。我不想刪除這個類，我只是希望能夠從HTML中恢復到「原始」硬編碼類。 – cbourn

您是否檢查過span12的樣式是否活躍？你可以嘗試使用'''column-span：all！important;''' – webstrap

我覺得將類改爲其中一個引導類是不行的，你應該創建一個新的CSS類' li.expanded'帶有'img.expanded'的特定規則，然後切換該類，這樣你就不會搞亂頁面佈局的基本類。 – Dunhamzzz

你需要一個類嗎？如果以前的答案不工作，但是你可以嘗試

$(this).css('column-span','all');

，並刪除它或者如果你沒有設置樣式屬性

$(this).removeAttr('style');

或以其他方式

$(this).css('column-span','');

來源

2012-08-31 09:09:14 webstrap

從jQuery重置默認CSS

回答

相關問題