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/

当我点击任何文章时，他们会扩展到行的整个宽度;但问题是当我点击一行的第一篇文章（第一行除外）时，＆＃34; 跳＆＃34;直到上面的那一行。

我尝试更改position和display的{{1}}和article属性，但我无法获得所需的行为。例如：当我更改.expanded的{{1}}时，块5和6，＆＃34;跳转＆＃34;到下面的行。删除position:absolute并更改为.expanded时类似。

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

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

进一步解释，点击元素时：

如果添加“扩展”类，那么这也会添加一个空白文章元素（之前）作为占位符以保持流量一致。这很重要，因为当“扩展”类的元素变为position：absolute时，它将从内容的正常流中删除。

如果删除“扩展”类，那么这也会删除空白文章占位符元素。 prevAll函数使用类'blank'查看所有先前的元素，然后获取第一个（）并删除它。因为它是在'之前'插入的，所以保证删除正确的空白文章占位符。

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

P.S。我对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"); 
    });

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

4 个答案: