javascript - 扩展内联 block 跳转到上面的行

Question

我有一个系列文章

<section>
<article>1</article>
<article>2</article>
<article>3</article>
....
<article>999</article>
<section>

排列成每行三个的网格

section { 
  position: relative 
}
article { 
  display: inline-block; 
  width: 33%;
} 

并且我希望它们在单击时水平扩展以完全占据其行。

所以我创建了一个扩展类

.expanded {
  position:absolute;
  left:0px;
  width: 100%;
}

并在点击时应用它

$("article").click(function(){ 
  $(this).toggleClass("expanded"); 
});

我快到了，正如您在此处的 fiddle 中看到的那样 http://jsfiddle.net/aqw339r0/1/

当我点击任何文章时，它们会扩展到整行宽度；但问题是，当我单击一行中的第一篇文章(第一行除外)时，它“跳”到紧挨着上面的行。

我已经尝试更改 article 和 .expanded 的 position 和 display 属性，但我无法获取我需要的行为。例如:当我更改 .expanded 的 position:absolute 时， block 5 和 6 会“跳转”到下面的行。当我删除 display:inline-block 并更改为 float:left 时类似。

您是否知道为什么会发生这种情况以及如何纠正它？

Answer 1

使用@Rick 的解决方案(减去 css top 编辑)，然后切换一个附加元素以保持其他元素就位，这应该可以满足需要:Fiddle

  $("article").click(function() { 
        $(this).toggleClass("expanded"); 
        if ($(this).hasClass("expanded"))
        {
            $(this).before("<article class='blank'>&nbsp;</article>");
        }
        else
        {
            $(this).prevAll('.blank').first().remove();
        }
  });

进一步解释，当元素被点击时:

如果添加“扩展”类，那么这还将添加一个空白文章元素(之前)作为占位符以保持流程一致。这很重要，因为当类为“expanded”的元素变为 position: absolute 时，它​​会从正常的内容流中移除。

如果删除“扩展”类，那么这也将删除空白文章占位符元素。 prevAll函数查看之前所有具有“空白”类的元素，然后获取第一个()元素并将其删除。因为它是“之前”插入的，所以可以保证删除正确的空白文章占位符。