试图将流体宽度div转换为100％宽模态

Question

你可以看到我现在所拥有的一个例子here。

我正试图让那些“完整”的div从中间扩展出来，在这个过程中将其他人推开。我现在所拥有的将它们推到左边缘然后展开它们。我知道这是因为我有position:absolute。关于如何实现这种效果的任何想法？

Answer 1

以下是我认为您所描述的一个工作示例：http://codepen.io/anon/pen/pKfAw

我从div中移除了display：table并将.min，.min p设置为width 0px，隐藏了溢出并移除了高度0％。

它跳跃的问题是因为你将所有的min设置为0并且完全浮动。这会自动将其推向左侧，然后展开。现在所有的div都动画为0，而.full的动画效果为100％。

Answer 2

不确定你的意思是“从中间扩展”。以下是js的快速修复：

$('div').on('click', function(){
   var $this = $(this);
   $this.toggleClass('full');
   $this.siblings().toggleClass('min');
});

这只会为点击的div添加完整的类。