将内联块跳转扩展到上一行

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类

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

并在点击时应用它

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

我几乎就在那里,你可以在这里看到小提琴http://jsfiddle.net/aqw339r0/1/

当我点击任何文章时,它们会扩展到行的整个宽度; 但问题是,当我点击一行的第一篇文章(第一行除外)时,它会" 跳转 "到上面的行.

我曾试图改变position及display两者的属性article和.expanded,但我不能得到我需要的行为.例如:当我更改块position:absolute时.expanded,块5和6,"跳转"到下面的行.类似的当我删除display:inline-block并更改为float:left.

您对此为何发生以及如何纠正有任何想法吗？

Answer 1

当在元素position:absolute上设置 时<article>，会将其带出正常内容流，并导致偏移。我们可以通过<article>在点击触发时添加一个空作为占位符来纠正它，并在再次点击时将其删除。

var open = false;

jQuery("article").click(function () {
    open = !open;

    if (open) {
        $(this).addClass("expanded");
        $(this).before("<article class='holder'>&nbsp;</article>");
    } else {
        $("article").removeClass("expanded");
        $(".holder").remove();
    }
});

ps 我不太擅长 jQuery，欢迎任何建议。

jsfiddle