扩展 OnClick 单个 div 并重新排列其余部分答案

【问题标题】：Expanding OnClick a single div with rearranging the rest扩展 OnClick 单个 div 并重新排列其余部分
【发布时间】：2018-12-06 21:07:24
【问题描述】：

大家！所以我想到的是有一个 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，并带有a和用于描述。

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

我曾想过在这些步骤中包含几个 JQuery 函数： 1.Onclick-所选元素展开，而所有其他元素都是JQuery的.remove()。 2.一旦它展开，其他元素就会被附加到两侧 - 假设容器内的 2 个 div 位于其左右端。当然，附加是完全针对任一侧 div 完成的。 3. 假设发生的过渡是其他卡片元素缩略图消失，并在 .append 函数完成后出现。

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

【问题讨论】：

你能分享你的javascript吗？
您能否展示您尝试过的内容、优化具体问题并展示呈现的 HTML？

标签： javascript css html bootstrap-4 transform

【解决方案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>

【讨论】：

是的，我知道手风琴，但这不是内容扩展本身的问题。这是调整卡片的大小并将它们放置在容器的左侧和右侧，一旦它们中的一个随内容扩展。可能需要转换和翻译，但是我也使用 JS 进行了研究，是否可以 .append 和 .remove 它们并在单击后向标记添加完全不同的样式。

【解决方案2】：

您可以使用 Bootstrap Collapse 组件和 jQuery 来切换 CSS 类。比如……

$('.collapse').on('show.bs.collapse', function () {
  $('.collapse.show').not(this).collapse("hide");
  $(this).parents('.col-sm').toggleClass("col-sm-6 col-sm");
  $(this).parents('.card-body').find('.col-12').toggleClass("col col-12");
});

$('.collapse').on('hide.bs.collapse', function () {
  $(this).parents('.col-sm-6').toggleClass("col-sm col-sm-6");
  $(this).parents('.card-body').find('.col').toggleClass("col-12 col");
});

然后随着类的变化添加一些 CSS 转换...

.row > [class*="col"], img{
    transition: all .3s ease;
}

演示：https://www.codeply.com/go/emFWdeJQgS

当然，您必须制作一些模组才能完全满足您的要求。

【讨论】：