我有一个系列文章
<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
时类似。
您是否知道为什么会发生这种情况以及如何纠正它?
最佳答案
使用@Rick 的解决方案(减去 css top 编辑),然后切换一个附加元素以保持其他元素就位,这应该可以满足需要:Fiddle
$("article").click(function() {
$(this).toggleClass("expanded");
if ($(this).hasClass("expanded"))
{
$(this).before("<article class='blank'> </article>");
}
else
{
$(this).prevAll('.blank').first().remove();
}
});
进一步解释,当元素被点击时:
如果添加“扩展”类,那么这还将添加一个空白文章元素(之前)作为占位符以保持流程一致。这很重要,因为当类为“expanded”的元素变为 position: absolute 时,它会从正常的内容流中移除。
如果删除“扩展”类,那么这也将删除空白文章占位符元素。 prevAll函数查看之前所有具有“空白”类的元素,然后获取第一个()元素并将其删除。因为它是“之前”插入的,所以可以保证删除正确的空白文章占位符。
关于javascript - 扩展内联 block 跳转到上面的行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32972602/