帶有擴展預覽的Bootstrap Grid縮略圖

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

有很多方法可以做到這一點。

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