Question

大家！因此，我要想到的是有一个div class =容器，其中包含2行3张卡片。

我正在使用引导程序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，并带有和进行描述。

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

我考虑过在这些步骤中使用几个JQuery函数： 1.Onclick-选定的元素将展开，而其他所有元素都将由JQuery删除.remove（）。 2.一旦展开，其他元素将附加到2侧-假设容器内的2个div位于其左右两端。当然，附加操作要精确到任一侧div。 3.可能发生的过渡是其他的卡片元素缩略图消失了，而.append功能完成后便消失了。

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

Answer 1

您可以使用Jquery-UI，有一个称为手风琴的组件，它的工作方式如下：

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

Answer 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

当然，您必须制作一些mod才能完全按照需要获取它。

扩展OnClick单个div，然后重新排列其余部分

2 个答案: