重新組織引導佈局 - 通過點擊

這裏延伸的div當列排序是一個想法：它應該是6盒（在一個三連勝），讓我們說這應該是大視域，且每個DIV應該有col-lg-4類：重新組織引導佈局 - 通過點擊

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

當用戶點擊框時，它應該被切換並展開以佔據整行。其餘的div應該像下面的例子那樣被拉或向上/向下推。

假設：

格時在其上用戶點擊（它可通過替換col-lg-4類通過jquery的完成通過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。

我將不勝感激任何意見。

來源

2017-01-05 creologic

你能分享你到目前爲止的代碼？ – ZimSystem

當然，這裏是我的嘗試：http://pastebin.com/Xbwrr0BZ – creologic

你應該分享你到目前爲止所嘗試的，但根據你的描述和stackoverflow的神憐憫我會建議這個答案。

注意兩件事：

我以前col-xs-*類，以便它可以在片段預覽視窗顯示。您只需要添加/更改所有col-xs-*，至col-md-*和/或col-lg-*，無論您希望使用哪一個。
要關閉擴展的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>

來源

2017-01-05 17:14:06 Syden

下一次我會在我的帖子中嵌入我的代碼。我不想強加一個解決方案的想法。事實證明，我以類似的方式推理:) 非常感謝！我沒有想過物理移動DOM樹中的節點，並且不必要地堅持列排序 – creologic

現在它的工作原理與我需要的完全一樣。非常感謝！ – creologic

這可行，但對我來說太[WET]（https://en.wikipedia.org/wiki/Don't_repeat_yourself#DRY_vs_WET_solutions）！ – ZimSystem

而不是使用引導推拉式的，一個簡單的解決方案是使用Flexbox的。這樣，只有1個類和順序通過jQuery進行更改。這與Bootstrap一起工作，是DRY，可以用於無限數量的列。

.flex { 
    flex-wrap: wrap; 
} 

.flex>div { 
    display: flex; 
    float: none; 
    flex: 0 0 33.333333%; 
    max-width: 33.333333%; 
    order: 0; 
} 

.flex>.active { 
    max-width: 100%; 
    flex: 0 0 100%; 
}

的Javascript：

$('.flex>.col-md-4').click(function(){ 
    var idx = $(this).index(); 

    //set natural order 
    $('.flex>.col-md-4').each(function(i,e){ 
     $(this).css('order',i+1); 
    }); 

    // change active 
    $('.active').toggleClass('active'); 
    $(this).toggleClass('active'); 
    $(this).css('order',Math.abs(idx%3-idx)); 
});

http://www.codeply.com/go/wWrUYpkwP4

來源

2017-01-05 17:54:34 ZimSystem

重新組織引導佈局 - 通過點擊

回答

相關問題