javascript - 如何将元素移动到其 flexbox 容器中的最后一个位置？

Question

我有一个包含几个细节元素的 flexbox 容器。它们遵循 flex-wrap 行为。我希望一个 details-element 在打开时跳到容器的其他元素下方。

所以，它应该从这个开始：

对此：

之后打开的所有细节都应该以相同的方式运行并跳到最后一个位置。到目前为止，我已经尝试更改使用 javascript/jQuery 单击的详细信息元素的顺序：

$('details').click(function (event) {
   this.style.order="2";
   $('details').not(this).style.order="1";
});

.container {
display:flex;
flex-wrap: wrap;
}

details {
order: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">

<details>
<summary>
first details
</summary>
<p>some details</p>
</details>

<details>
<summary>
second details
</summary>
<p>some details</p>
</details>

<details>
<summary>
third details
</summary>
<p>some details</p>
</details>

<details>
<summary>
fourth details
</summary>
<p>some details</p>
</details>

<details>
<summary>
fifth details
</summary>
<p>some details</p>
</details>

</div>

我是否需要为此给细节元素一个类并以某种方式解决它们？或者有没有其他方法可以实现我正在寻找的东西？

Answer 1

我做了一些改变。这似乎可以让您找到您想要的东西。添加的边框是为了清楚起见。请参阅下面的代码。

诀窍是将所有设置<details>为同一个订单组。在这种情况下，我使用了 0。然后将 clicked 更改<details>为order: 1（只需比分配给 all 的组号高<details>）。

另一个有点棘手的部分是，要在 open 上“取消设置”“open”属性，<details>您必须使用removeAttr()(jQuery) 或.removeAttribute(vanilla JS)。

最后，这里有很多很好的信息MDN。

$('details').click(function(event) {
  $('details').css({order: 0, width: "auto"}).removeAttr("open");
  $(this).css({order: 1, width: "100%"});
});

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 1px solid blue;
}

details {
  border: 1px solid red;
  padding: 1rem;
  order: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">

  <details>
    <summary>
      first details
    </summary>
    <p>some details</p>
  </details>

  <details>
    <summary>
      second details
    </summary>
    <p>some details</p>
  </details>

  <details>
    <summary>
      third details
    </summary>
    <p>some details</p>
  </details>

  <details>
    <summary>
      fourth details
    </summary>
    <p>some details</p>
  </details>

  <details>
    <summary>
      fifth details
    </summary>
    <p>some details</p>
  </details>

</div>

Answer 2

如果它应该发生在之后打开的所有细节上，你可以添加一个类.container

$('details').click(function (event) {
   $('.container').addClass('details-below');
});

.container {
  display:flex;
  flex-wrap: wrap;
}

.container.details-below details {
  order: 2;
}