我正在使用网格布局(Bootstrapper)来按行显示特定宽度的图像。
<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>
我希望能够在用户单击图像时使图像的宽度跨越所有列(class =“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”，其他属于“span4”) “span12”。
有没有办法在第二次点击时从 HTML 恢复到“硬编码”类？
最佳答案
CSS 类会级联，因此队列中的最后一个类将覆盖前面的所有类。您应该能够简单地使用 jQuery 打开/关闭“span12”类:
$(this).toggleClass('span12');
关于jquery - 从 jQuery 重置默认 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12211662/