javascript - 试图将流体宽度 div 转换为 100% 宽模态

Question

您可以在此处查看我现在所拥有的示例。

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

score 2 · Accepted Answer

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

我从 div 中删除了 display: table 并将 .min, .min p 设置为宽度 0px 并隐藏了溢出并删除了高度 0%。

它跳跃的问题是因为您将所有最小值设置为 0 并且完全浮动左侧。这会自动将其推向左侧，然后向外扩展。现在所有 div 的动画都设置为 0，而 .full 的动画设置为 100%。

score 0 · Accepted Answer

不知道“从中间向外扩展”是什么意思。这是您的js的快速修复：

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

这只会将完整类添加到单击的 div 中。

2 回答 2