javascript - 重新组织 Bootstrap 布局 - 通过单击扩展 div 时的列排序

Question

这里有一个想法:它应该是 6 个盒子(一行三个)，假设它应该是大视口(viewport)，并且每个 div 应该具有类 col-lg-4:

 ------- ------- -------
|       |       |       |
|   A   |   B   |   C   |
|       |       |       |
 ------- ------- -------
|       |       |       |
|   D   |   E   |   F   |
|       |       |       |
 ------- ------- -------

当用户单击框时，应该切换并展开它以占据整行。其余的 div 应该像下面的示例一样被拉动或上推/下推。

假设:

• div 在用户点击时扩展(可以通过 jquery 将类 col-lg-4 替换为 col-lg-12 来完成)

• 同时只能扩展一个div

图例:

• X - 折叠的 div
• X' - 扩展 div

A扩展:

 ------- ------- -------
|                       |
|           A'          |
|                       |
 ------- ------- -------
|       |       |       |
|   B   |   C   |   D   |
|       |       |       |
 ------- ------- -------
|       |       |
|   E   |   F   |
|       |       |
 ------- ------- 

B扩展:

 ------- ------- -------
|                       |
|           B'          |
|                       |
 ------- ------- -------
|       |       |       |
|   A   |   C   |   D   |
|       |       |       |
 ------- ------- -------
|       |       |
|   E   |   F   |
|       |       |
 ------- ------- 

C 扩展:

 ------- ------- -------
|                       |
|           C'          |
|                       |
 ------- ------- -------
|       |       |       |
|   A   |   B   |   D   |
|       |       |       |
 ------- ------- -------
|       |       |
|   E   |   F   |
|       |       |
 ------- ------- 

D扩展:

 ------- ------- -------
|       |       |       |
|   A   |   B   |   C   |
|       |       |       |
 ------- ------- -------
|                       |
|           D'          |
|                       |
 ------- ------- -------
|       |       |
|   E   |   F   |
|       |       |
 ------- ------- 

E 扩展:

 ------- ------- -------
|       |       |       |
|   A   |   B   |   C   |
|       |       |       |
 ------- ------- -------
|                       |
|           E'          |
|                       |
 ------- ------- -------
|       |       |
|   D   |   F   |
|       |       |
 ------- ------- 

F扩展:

(...)

我尝试使用类 col-lg-[push|pull]-n 但问题似乎是在行中向上/向下移动 div。

如果您有任何建议，我将不胜感激。

Answer 1

您应该分享到目前为止您所尝试过的内容，但根据您的描述以及 stackoverflow 的上帝仁慈，我会建议这个答案。

注意两件事:

1. 我使用了 col-xs-* 类，因此它可以显示在代码片段预览视口(viewport)上。您只需将所有 col-xs-* 添加/更改为 col-md-* 和/或 col-lg-* ，无论您想使用哪个。

2. 要关闭展开的 div 元素，只需再次单击它即可。

$(".itemA").on("click", function() {
  var isExpanded = $(this).hasClass("col-xs-12");
  //if expanded already toggle back to col-xs-4
  if (isExpanded) {
    $(this).addClass("col-xs-4");
    $(this).removeClass("col-xs-12");
    //insert before next item
    $(this).insertBefore(".itemB");
  } else {
    //remove any other expanded item
    $(".col-xs-12").not(this).removeClass("col-xs-12").addClass("col-xs-4");
    $(this).addClass("col-xs-12");
    $(this).removeClass("col-xs-4");
    //insert as first expanded item
    $(this).insertBefore(".itemB");
    //place expanded item above
    $(".itemB").insertAfter(".itemA");
    //push the rest of items
    $(".itemC").insertAfter(".itemB");
    $(".itemD").insertAfter(".itemC");
    $(".itemE").insertAfter(".itemD");
    $(".itemF").insertAfter(".itemE");
  }
});
$(".itemB").on("click", function() {
  var isExpanded = $(this).hasClass("col-xs-12");
  //if expanded already toggle back to normal
  if (isExpanded) {
    $(this).addClass("col-xs-4");
    $(this).removeClass("col-xs-12");
    //insert before next item
    $(this).insertBefore(".itemC");
  } else {
    //remove any other expanded item
    $(".col-xs-12").not(this).removeClass("col-xs-12").addClass("col-xs-4");
    $(this).addClass("col-xs-12");
    $(this).removeClass("col-xs-4");
    //insert as first expanded item
    $(this).insertBefore(".itemA");
    //place expanded item above
    $(".itemA").insertAfter(".itemB");
    //push the rest of items
    $(".itemC").insertAfter(".itemA");
    $(".itemD").insertAfter(".itemC");
    $(".itemE").insertAfter(".itemD");
    $(".itemF").insertAfter(".itemE");
  }
});
$(".itemC").on("click", function() {
  var isExpanded = $(this).hasClass("col-xs-12");
  //if expanded already toggle back to normal
  if (isExpanded) {
    $(this).addClass("col-xs-4");
    $(this).removeClass("col-xs-12");
    //insert before next item
    $(this).insertBefore(".itemD");
  } else {
    //remove any other expanded item
    $(".col-xs-12").not(this).removeClass("col-xs-12").addClass("col-xs-4");
    $(this).addClass("col-xs-12");
    $(this).removeClass("col-xs-4");
    //insert as first expanded item
    $(this).insertBefore(".itemA");
    //place expanded item above
    $(".itemA").insertAfter(".itemC");
    //push the rest of items
    $(".itemB").insertAfter(".itemA");
    $(".itemD").insertAfter(".itemB");
    $(".itemE").insertAfter(".itemD");
    $(".itemF").insertAfter(".itemE");
  }
});

$(".itemD").on("click", function() {
  var isExpanded = $(this).hasClass("col-xs-12");
  //if expanded already toggle back to normal
  if (isExpanded) {
    $(this).addClass("col-xs-4");
    $(this).removeClass("col-xs-12");
    //insert before next item
    $(this).insertBefore(".itemE");
  } else {
    //remove any other expanded item
    $(".col-xs-12").not(this).removeClass("col-xs-12").addClass("col-xs-4");
    $(this).addClass("col-xs-12");
    $(this).removeClass("col-xs-4");
    //place expanded in second row
    $(this).insertBefore(".itemE");
    //push the rest of items
    $(".itemB").insertAfter(".itemA");
    $(".itemC").insertAfter(".itemB");
    $(".itemE").insertAfter(".itemD");
    $(".itemF").insertAfter(".itemE");
  }
});

$(".itemE").on("click", function() {
  var isExpanded = $(this).hasClass("col-xs-12");
  //if expanded already toggle back to normal
  if (isExpanded) {
    $(this).addClass("col-xs-4");
    $(this).removeClass("col-xs-12");
    //insert before next item
    $(this).insertBefore(".itemF");
  } else {
    //remove any other expanded item
    $(".col-xs-12").not(this).removeClass("col-xs-12").addClass("col-xs-4");
    $(this).addClass("col-xs-12");
    $(this).removeClass("col-xs-4");
    //place expanded in second row
    $(this).insertAfter(".itemD");
    //push the rest of items
    $(".itemB").insertAfter(".itemA");
    $(".itemC").insertAfter(".itemB");
    $(".itemD").insertAfter(".itemE");
    $(".itemF").insertAfter(".itemD");
  }
});

$(".itemF").on("click", function() {
  var isExpanded = $(this).hasClass("col-xs-12");
  //if expanded already toggle back to normal
  if (isExpanded) {
    $(this).addClass("col-xs-4");
    $(this).removeClass("col-xs-12");
    //insert before next item
    $(this).insertAfter(".itemE");
  } else {
    //remove any other expanded item
    $(".col-xs-12").not(this).removeClass("col-xs-12").addClass("col-xs-4");
    $(this).addClass("col-xs-12");
    $(this).removeClass("col-xs-4");
    //place expanded in second row
    $(this).insertAfter(".itemD");
    //push the rest of items
    $(".itemB").insertAfter(".itemA");
    $(".itemC").insertAfter(".itemB");
    $(".itemD").insertAfter(".itemF");
    $(".itemE").insertAfter(".itemD");
  }
});

.col-xs-4 {
  background: gainsboro;
  height: 100px;
  text-align: center;
  line-height: 100px;
  border: 1px solid white;
}

.col-xs-4:hover {
  background: lightgray;
}

.col-xs-12 {
  background: lightgray;
  height: 100px;
  text-align: center;
  line-height: 100px;
  border: 1px solid white;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-4 itemA">A</div>
    <div class="col-xs-4 itemB">B</div>
    <div class="col-xs-4 itemC">C</div>
    <div class="col-xs-4 itemD">D</div>
    <div class="col-xs-4 itemE">E</div>
    <div class="col-xs-4 itemF">F</div>
  </div>
</div>