单击

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/

但是，我在使用动态数据时遇到了麻烦。它目前只是在所有帖子的末尾显示一个大行（而不仅仅是一行帖子）。我想在每三个帖子之后有一个大的第12行

我将如何做到这一点？有什么帮助吗？

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

Answer 1

有很多方法可以做到。

方法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>

方法2（带动画）：

与上述几乎相同，但不是每次都创建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>