我正在使用網格佈局(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恢復到「硬編碼」類?
我很欣賞你的答案, toggleClass不會對圖像寬度(跨度)產生影響。我不想刪除這個類,我只是希望能夠從HTML中恢復到「原始」硬編碼類。 – cbourn
您是否檢查過span12的樣式是否活躍?你可以嘗試使用'''column-span:all!important;''' – webstrap
我覺得將類改爲其中一個引導類是不行的,你應該創建一個新的CSS類' li.expanded'帶有'img.expanded'的特定規則,然後切換該類,這樣你就不會搞亂頁面佈局的基本類。 – Dunhamzzz