6列布局的Boostrap行手風琴

Question

我正在使用Bootstrap製作6列布局組合網站。每行（固定高度）包含6個元素。當點擊上面六個元素中的一個時，我想讓下面一行向下移動（像素的相對量）。在行之間的空格中也應該出現一個帶有內容的div。

我想這與Bootstrap的內置手風琴功能有關，但它被設想爲使用整行而不是行內的單個元素來操作。

這是我處理的代碼示例：

<div class="row"> 
    <div class="col-md-2"> 
     <p><a href="#">column 1 A</a></p> 
    </div> 
    <div class="col-md-2"> 
     <p><a href="#">column 2 A</a></p> 
    </div> 
    <div class="col-md-2"> 
     <p><a href="#">column 3 A</a></p> 
    </div> 
    <div class="col-md-2"> 
     <p><a href="#">column 4 A</a></p> 
    </div> 
    <div class="col-md-2"> 
     <p><a href="#">column 5 A</a></p> 
    </div> 
    <div class="col-md-2"> 
     <p><a href="#">column 6 A</a></p> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-2"> 
     <p><a href="#">column 1 B</a></p> 
    </div> 
    <div class="col-md-2"> 
     <p><a href="#">column 2 B</a></p> 
    </div> 
    <div class="col-md-2"> 
     <p><a href="#">column 3 B</a></p> 
    </div> 
    <div class="col-md-2"> 
     <p><a href="#">column 4 B</a></p> 
    </div> 
    <div class="col-md-2"> 
     <p><a href="#">column 5 B</a></p> 
    </div> 
    <div class="col-md-2"> 
     <p><a href="#">column 6 B</a></p> 
    </div> 
</div> 

這些示例圖像：

點擊之前的要素之一

點擊一個後的元素

非常感謝大家提前！

Answer 1

你必須修改下面以滿足您的需求，但這個工程：https://jsfiddle.net/y91Ly246/

HTML：

<div class="row first"> 
    <div class="col-xs-2"> 
     <p><a href="#">column 1 A</a></p> 
    </div> 
    <div class="col-xs-2"> 
     <p><a href="#">column 2 A</a></p> 
    </div> 
    <div class="col-xs-2"> 
     <p><a href="#">column 3 A</a></p> 
    </div> 
    <div class="col-xs-2"> 
     <p><a href="#">column 4 A</a></p> 
    </div> 
    <div class="col-xs-2"> 
     <p><a href="#">column 5 A</a></p> 
    </div> 
    <div class="col-xs-2"> 
     <p><a href="#">column 6 A</a></p> 
    </div> 
</div> 
<div class="content"> 
    CONTENT! 
</div> 
<div class="row second"> 
    <div class="col-xs-2"> 
     <p><a href="#">column 1 B</a></p> 
    </div> 
    <div class="col-xs-2"> 
     <p><a href="#">column 2 B</a></p> 
    </div> 
    <div class="col-xs-2"> 
     <p><a href="#">column 3 B</a></p> 
    </div> 
    <div class="col-xs-2"> 
     <p><a href="#">column 4 B</a></p> 
    </div> 
    <div class="col-xs-2"> 
     <p><a href="#">column 5 B</a></p> 
    </div> 
    <div class="col-xs-2"> 
     <p><a href="#">column 6 B</a></p> 
    </div> 
</div> 

的jQuery：

$(".content").hide(); 
$(".first > div > p > a").click(function() { 
    $(".content").toggle(); 
});