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
这些只是简单的例子，我希望他们可以帮助你。

从行替换所有div而不移动网格的其他行

1 个答案: