javascript - Img 在点击时扩展到 100%(并且仍然坚持网格)

Question

这就是我正在使用的: http://jsfiddle.net/wppjq1a3/

$(document).ready(function(){
    $('.sec-img').click(function() {
        $(this).css({
            height: '100%',
            width: '100%'
        });
    });
});

我希望它做的是:

• 当您点击任何图片时，它会展开(如果上面有一张图片 扩展图像；然后小图像将被推到下面 展开图片。

• 此外，当您点击一张图片时，之前展开的一张会收缩 到原始大小 (50%)。

• 我想使用某种网格。图片都在走 具有相同的尺寸比例。我尝试与 :after 一起工作 这两个列网格之间(底部和中间)之间有 20px 图片，但没有结果。

Answer 1

试一试:

http://jsfiddle.net/wppjq1a3/2/

我没有将 css 添加到 jquery 中，而是切换了一个类。我添加了红色的背景色，这样当你在悬停时区分，因为不透明度被调低，我想确保我点击的 div 出现在前面。我还添加了一个绝对位置和一个 z-

jQuery:

$(document).ready(function(){
    $('.sec-img').click(function() {
        $(this).toggleClass("expand");
    });
});

CSS:

.expand{
    width:100% !important;
    height:100% !important;
    position: absolute;
    z-index:999999 !important;

}