javascript - 在不移动网格的其他行的情况下替换行中的所有 div

Question

我有一个 div 的网格。以及所有 position:relative 在其父级中。 我需要做的是单击一个 div，该行中的所有 div 都将被隐藏，并且该空间将被第一个 div 和

占用

width = number_of_div_in_one_row * orignal_width

即整行将被用户点击的 div 占据。 我尝试了很多很多想法。计算一行中的宽度数并应用 css 动画隐藏每个 div 并增加第一个 div 的宽度。

但每当用户单击任何 div 时，其上方和下方的所有行都会受到干扰。 我不要求任何人为我做所有的计算。只是想问一下有没有我可以申请这种场景的 JS/jquery 库。 我已经试过了http://nanogallery.brisbois.fr/

但是在这个库中，所有图像都被其他图像集替换了。我只想用一行做这样的事情。

Answer 1

我不知道我是否理解正确你的问题，但在这个 Fiddle有一个每行三个 div 的流体网格。
当您单击一个 div 时，它会变为 100% 宽度，而同一行中的其他 div 将消失。
当你点击有动画的div时，整行会回到起点
您需要的所有代码是

<script type="text/javascript">
$(document).ready(function(){
        $('div.element').click(function(){
            $(this).toggleClass('go');
            if($(this).hasClass('go')){
                $(this).animate({'width':'100%'},{
                duration:1000,
                step:function(gox){
                  var width = gox < 100 ? (100 - gox) / 2 : 0;
                  $(this).siblings().css({
                      'border':'0px',
                      'width': width + "%"
                      }); 
                  }
                 })

            }else{
            $(this).parent('div.row').find('div.element').animate({'width':'33.33%'},1000);
        };
    });
});
</script>

如果你的行有不同数量的 div，你可以这样做: Fiddle
这些只是简单的例子，希望对您有所帮助。