6 列布局中 Bootstrap 行的手风琴

Question

我正在使用 Bootstrap 制作一个 6 栏布局的投资组合网站。每行（具有固定高度）包含 6 个元素。当单击上一个元素中的六个元素之一时，我希望下一行向下移动（相对数量的像素）。在行与行之间的空白 space 中，还应出现带有内容的 div。

我想这与 Bootstrap 的内置手风琴功能有关，但它被设想为对整行进行操作，而不是在一行中使用 dividual 元素。

这是我正在处理的代码示例：

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

6 列布局中 Bootstrap 行的手风琴

Accordion for a Boostrap row in a 6-column layout

twitter-bootstrap

accordion

portfolio