Fatal编程技术网
  • javascript/
  • Javascript 重新组织引导布局-单击扩展div时的列排序

Javascript 重新组织引导布局-单击扩展div时的列排序

javascript jquery html css twitter-bootstrap

Javascript 重新组织引导布局-单击扩展div时的列排序,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,这里有一个想法：它应该是6个框（一行三个），假设它应该是大视口，每个div应该有classcol-lg-4： ------- ------- ------- | | | | | A | B | C | | | | | ------- ------- ------- | | | | | D | E | F | | |

这里有一个想法：它应该是6个框（一行三个），假设它应该是大视口，每个div应该有class
col-lg-4
：

 ------- ------- -------
|       |       |       |
|   A   |   B   |   C   |
|       |       |       |
 ------- ------- -------
|       |       |       |
|   D   |   E   |   F   |
|       |       |       |
 ------- ------- -------
当用户点击这个框时，它应该被切换并展开以占据整行。其余的div应该像下面的例子一样向上/向下拉或推

假设：

  • 当用户单击div时，它会扩展（可以通过jquery将class
    col-lg-4
    替换为
    col-lg-12
    来完成）

  • 一次只能扩展一个div

图例：

  • X-折叠分区
  • 扩展分区
A
扩展：

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

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

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

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

B
扩展：

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

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

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

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

C
扩展：

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

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

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

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

D
扩展：

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

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

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

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

E
扩展：

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

F
扩展：

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

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

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

 ------- ------- -------
|       |       |       |
|   A   |   B   |   C   |
|       |       |       |
 ------- ------- -------
|                       |
|           D'          |
|                       |
 ------- ------- -------
|       |       |
|   E   |   F   |
|       |       |
 ------- -------
（……）

我尝试使用class
collg-[push | pull]-n
，但问题似乎是在行中上下移动div

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

您应该分享您迄今为止所做的尝试，但根据您的描述和stackoverflow的上帝保佑，我将建议您回答这个问题

注2：

  • 我使用了
    colxs-*
    类，这样它就可以显示在“代码段预览”视口中。您只需将所有
    col xs-*
    添加/更改为
    col md-*
    和/或
    col lg-*
    ，以您希望使用的为准

  • 要关闭展开的
    div
    项，只需再次单击它

    • $（“.itemA”）。在（“单击”，函数（）{
var isExpanded=$（this.hasClass（“col-xs-12”）；
//如果已展开，则切换回col-xs-4
如果（扩展）{
$（this.addClass（“col-xs-4”）；
$（this.removeClass（“col-xs-12”）；
//在下一项之前插入
$（此）.insertBefore（“.itemB”）；
}否则{
//删除任何其他展开项
$（.col-xs-12”）.not（this）.removeClass（“col-xs-12”）.addClass（“col-xs-4”）；
$（this.addClass（“col-xs-12”）；
$（this.removeClass（“col-xs-4”）；
//作为第一个展开项插入
$（此）.insertBefore（“.itemB”）；
//将展开项放在上面
美元（“.itemB”）。在（“.itemA”）之后插入；
//推送其余的项目
$（.itemC”）。在（.itemB）之后插入；
$（.itemD”）。在（.itemC）之后插入；
美元（“.itemE”）。在（“.itemD”）之后插入；
美元（“.itemF”）。在（“.itemE”）之后插入；
}
});
$（“.itemB”）。在（“单击”，函数（）{
var isExpanded=$（this.hasClass（“col-xs-12”）；
//如果已展开，则切换回正常状态
如果（扩展）{
$（this.addClass（“col-xs-4”）；
$（this.removeClass（“col-xs-12”）；
//在下一项之前插入
$（此）.insertBefore（“.itemC”）；
}否则{
//删除任何其他展开项
$（.col-xs-12”）.not（this）.removeClass（“col-xs-12”）.addClass（“col-xs-4”）；
$（this.addClass（“col-xs-12”）；
$（this.removeClass（“col-xs-4”）；
//作为第一个展开项插入
$（此）.insertBefore（“.itemA”）；
//将展开项放在上面
$（.itemA”）。在（.itemB）之后插入；
//推送其余的项目
美元（“.itemC”）。在（“.itemA”）之后插入；
$（.itemD”）。在（.itemC）之后插入；
美元（“.itemE”）。在（“.itemD”）之后插入；
美元（“.itemF”）。在（“.itemE”）之后插入；
}
});
$（“.itemC”）。在（“单击”，函数（）{
var isExpanded=$（this.hasClass（“col-xs-12”）；
//如果已展开，则切换回正常状态
如果（扩展）{
$（this.addClass（“col-xs-4”）；
$（this.removeClass（“col-xs-12”）；
//在下一项之前插入
$（此）.insertBefore（“.itemD”）；
}否则{
//删除任何其他展开项
$（.col-xs-12”）.not（this）.removeClass（“col-xs-12”）.addClass（“col-xs-4”）；
$（this.addClass（“col-xs-12”）；
$（this.removeClass（“col-xs-4”）；
//作为第一个展开项插入
$（此）.insertBefore（“.itemA”）；
//将展开项放在上面
美元（“.itemA”）。在（“.itemC”）之后插入；
//推送其余的项目
美元（“.itemB”）。在（“.itemA”）之后插入；
$（.itemD”）。在（.itemB）之后插入；
美元（“.itemE”）。在（“.itemD”）之后插入；
美元（“.itemF”）。在（“.itemE”）之后插入；
}
});
$（“.itemD”）。在（“单击”，函数（）{
var isExpanded=$（this.hasClass（“col-xs-12”）；
//如果已展开，则切换回正常状态
如果（扩展）{
$（this.addClass（“col-xs-4”）；
$（this.removeClass（“col-xs-12”）；
//在下一项之前插入
$（此）.insertBefore（“.itemE”）；
}否则{
//删除任何其他展开项
$（.col-xs-12”）.not（this）.removeClass（“col-xs-12”）.addClass（“col-xs-4”）；
$（this.addClass（“col-xs-12”）；
$（this.removeClass（“col-xs-4”）；
//位置在第二行展开
$（此）.insertBefore（“.itemE”）；
//推送其余的项目
美元（“.itemB”）。在（“.itemA”）之后插入；
$（.itemC”）。在（.itemB）之后插入；
美元（“.itemE”）。在（“.itemD”）之后插入；
美元（“.itemF”）。在（“.itemE”）之后插入；
}
});
$（“.itemE”）。在（“单击”，函数（）{
var isExpanded=$（this.hasClass（“col-xs-12”）；
//如果已展开，则切换回正常状态
如果（扩展）{
$（this.addClass（“col-xs-4”）；
$（this.removeClass（“col-xs-12”）；
//在下一项之前插入
$（此）.insertBefore（“.itemF”）；
}否则{
//删除任何其他展开项
$（.col-xs-12”）.not（this）.removeClass（“col-xs-12”）.addClass（“col-xs-4”）；
$（this.addClass（“col-xs-12”）；
$（this.removeClass（“col-xs-4”）；
//位置在第二行展开
$（此）.insertAfter（“.itemD”）；
//推送其余的项目
美元（“.itemB”）。在（“.itemA”）之后插入；
$（.itemC”）。在（.itemB）之后插入；
美元（“.itemD”）。在（“.itemE”）之后插入；
$（.itemF”）。在（.itemD）之后插入；
}
});
$（“.itemF”）。在（“单击”，函数（）{
var isExpanded=$（this.hasClass（“col-xs-12”）；
//如果已展开，则切换回正常状态
如果（扩展）{
$（this.addClass（“col-xs-4”）；
$（this.removeClass（“col-xs-12”）；
//在下一项之前插入
$（此）。插入后面的（“.itemE”）；
}否则{
//删除任何其他展开项
$（.col-xs-12”）.not（this）.removeClass（“col-xs-12”）.addClass（“col-xs-4”）；
$（thi）