扩展内联块跳转到上一行

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/

当我点击任何一篇文章时，它们会扩大到该行的全宽；但问题是，当我单击一行的第一篇文章（第一行除外）时，它“跳转”到正上方的行。

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

您对为什么会发生这种情况以及如何纠正它有任何想法吗？

Answer 1

使用@Rick 的解决方案（减去 css 顶部编辑），然后切换一个附加元素以保持其他元素就位，这应该可以满足需要：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'，那么这还将添加一个空白文章元素（之前）作为占位符以保持流程一致。这很重要，因为当具有类 'expanded' 的元素变为 position: absolute 时，它​​将从内容的正常流中删除。

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

Answer 2

当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();
    }
});

附言我不太擅长jQuery，欢迎提出任何建议。

jsfiddle

Answer 3

我想不出一个纯粹的 CSS 解决方案，但既然您使用的是 jQuery，只需硬编码扩展元素的 top：

$("article").click(function() { 
  $(this).css('top', $(this).position().top);
  $(this).toggleClass("expanded"); 
});

Fiddle

一旦扩展类被移除，top 样式将被忽略。

Answer 4

试试这个

 <section>
    <article>1</article>
    <article>2</article>
    <article>3</article>
    </section>
    <section>
    <article>4</article>
    <article>5</article>
    <article>6</article>
    <section>
    <section>
    <article>7</article>
    <article>8</article>
    <article>9</article>
    </section>

    section {
        position:relative;
    }

    article { 
        width: 30%;
        min-width: 200px;
        min-height: 200px;
        display: inline-block;
        border: 1px solid black;
    }

    .expanded {
        width: 100%;
        background-color:#eef;
        left:0px;
        top:0;
        position:absolute;
        transition: 0.2s linear;
    }

    // if you want others to close while expanding
    $("article").click(function(){ 
       $('article').removeClass("expanded");
        $(this).toggleClass("expanded"); 
    });


// esle if you want everything to be expanded
   $("article").click(function(){ 
        $(this).toggleClass("expanded"); 
    });