將元素移動到 flexbox 容器 CSS Javascript 中的最后一個位置

Question

我有一個 flexbox 容器，其中包含幾個細節元素。 它們遵循 flex-wrap 行為。 我想要一個細節元素在容器打開時跳到容器的其他元素下方。 所以，它應該是這樣的：

之前的 flexbox

對此：

之后的彈性盒

之后打開的所有細節都應該以相同的方式運行並跳到最后一個位置。 到目前為止，我嘗試更改使用 javascript/jQuery 單擊的 details-element 的順序：

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

 .container { display:flex; flex-wrap: wrap; } details { order: 1; }

 <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

如果它應該發生在之后打開的所有詳細信息中，您可以向.container添加一個類

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

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

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

Answer 2

我做了很多改變。 這似乎可以為您提供您想要的東西。 添加的邊框是為了清晰起見。 請參閱下面的代碼。

訣竅是將所有<details>設置為相同的訂單組。 在這種情況下，我使用了 0。然后將單擊的<details>更改為order: 1 （只需是比分配給所有<details>的組編號高的組編號）。

另一個有點棘手的部分是要“取消設置” open <details>上的“open”屬性，您必須使用removeAttr() (jQuery) 或.removeAttribute (vanilla JS)。

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

 .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; } summary { text-align: center; }

 <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>