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(); 
});