javascript - Bootstrap 网格缩略图，单击时可展开预览

Question

我有一个应用程序，其中一部分是列出用户个人资料的帖子:

<div class="row">
    <%@posts.each do |x|%>   
        <div class="col-lg-4">   
          <%=x.body%>
        </div>    
    <%end%> 
    <div class="row">
      <div class="col-lg-12" style="border:1px solid black">
        dsafasf
      </div>
    </div>             

如果我没有使用动态数据(很多帖子)，这就是我最终想要发生的事情(显示一行帖子 - 然后点击下面的大行被切换): https://jsfiddle.net/nk2vLhhp/2/

但是，我在处理动态数据时遇到了麻烦。它目前只在所有帖子的末尾显示一大行(不仅仅是一排帖子)。我想要每三个帖子后有一个大的 col-12 行

我该怎么做呢？有什么帮助吗？

PS:我的最终目标是这样的:http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/

Answer 1

有很多方法可以做到这一点。

方法一:

$('.col-xs-4').click(function() {
  $(".explanation").slideUp().remove();
  var $desc = $("<div/>", {
    class: 'explanation row'
  }); //it can contain a close button like the others.
  $desc.html($(this).find('.hidden').html());
  $(this).closest('.row').after($desc).slideDown();
});

.col-xs-4 {
  border: 1px solid black;
}
.col-xs-12 {
  border: 1px solid black;
}
.hidden {
  display: none;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-xs-4">
    post 1
    <div class='desc hidden'>Post 1 description</div>
  </div>
  <div class="col-xs-4">
    post 2
    <div class='desc hidden'>Post 2 description</div>
  </div>
  <div class="col-xs-4">
    post 3
    <div class='desc hidden'>Post 3 description</div>
  </div>
</div>
<div class="row">
  <div class="col-xs-4">
    post 5
    <div class='desc hidden'>Post 5 description</div>
  </div>
  <div class="col-xs-4">
    post 6
    <div class='desc hidden'>Post 6 description</div>
  </div>
  <div class="col-xs-4">
    post 7
    <div class='desc hidden'>Post 7 description</div>
  </div>
</div>

方法二(带动画):

几乎与上面相同，但不是每次都创建 div.explanation，只需将其定义为隐藏在 html 中的每一行下方。

https://jsfiddle.net/nk2vLhhp/13/

$('.col-xs-4').click(function(e) {
  var $target = $(e.currentTarget);
  $('.explanation').hide();
  var targetClass = $target.attr('data-target');
  $('.' + targetClass).removeClass('hidden').hide().slideDown();
});

.col-xs-4 {
  border: 1px solid black;
}
.col-xs-12 {
  border: 1px solid black;
}
.hidden {
  display: none;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row">
  <div class="col-xs-4" data-target='1-content'>
    post 1
  </div>
  <div class="col-xs-4" data-target='2-content'>
    post 2
  </div>
  <div class="col-xs-4" data-target='3-content'>
    post 3
  </div>
</div>
<div class='row'>
  <div class='col-xs-12 explanation hidden 1-content'>Post 1 description</div>
  <div class='col-xs-12 explanation hidden 2-content'>Post 2 description</div>
  <div class='col-xs-12 explanation hidden 3-content'>Post 3 description</div>
  <div>

    <div class="row">
      <div class="col-xs-4" data-target='4-content'>
        post 4
      </div>
      <div class="col-xs-4" data-target='5-content'>
        post 5
      </div>
      <div class="col-xs-4" data-target='6-content'>
        post 6
      </div>
    </div>
    <div class='row'>
      <div class='col-xs-12 explanation hidden 4-content'>Post 4 description</div>
      <div class='col-xs-12 explanation hidden 5-content'>Post 5 description</div>
      <div class='col-xs-12 explanation hidden 6-content'>Post 6 description</div>
      <div>