javascript - 通过重新排列其余部分来扩展 OnClick 单个 div

Question

各位!所以我的想法是有一个 div class= 容器，里面有 2 行 3 张卡片。

我使用 bootstrap 4 作为我的网格和布局。

卡片示例:https://getbootstrap.com/docs/4.0/components/card/

<div class="container>
  <div class="row>
    <card-element />
    <card-element />
    <card-element />
    <card-element />
  </div>
</div>

基本上这 4 个元素也是 div，其中包含其他 div，用于在顶部分发内容 f.x，并带有用于描述的内容。

我想要实现的功能是，当我点击这些中的任何一个时，我点击的那个应该继续并在其他人完成移动到左侧或右侧时在中间展开容器元素并调整到更小的尺寸(像缩略图但非常小)。到目前为止，我已经尝试使用转换和翻译进行扩展，但是我不知道如何混合和匹配这两种功能。

我想过在这些步骤中使用几个 JQuery 函数:1.Onclick- 选定的元素展开，而所有其他元素都是 JQuery 的 .remove()。2.Once it expands the other elements get appended to 2 sides - 假设容器内的 2 个 div 位于容器的左右端。当然，追加是精确地添加到任何一侧的 div。 3. 假设发生的过渡是其他卡片元素缩略图消失，缓入/缓出，并在 .append 函数完成后出现。

任何想法都会有所帮助，或者对类似问题/任务的任何引用都会有很大帮助。

Answer 1

您可以使用 Jquery-UI , 有一个叫做 accordion 的组件，它的工作原理是这样的:

$(function () {
    $("#accordion").accordion();
});

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="accordion">
  <h3>Card 1</h3>
  <div>
    <p>
      Text of card 1...
    </p>
  </div>
  <h3>Card 2</h3>
  <div>
    <p>
      Text of card 2...
    </p>
  </div>
</div>