如何使用網格（Bootstrap和jQuery）將更多內容加載到項目？

Question

我想創建包含行中的項目的HTML佈局，並且每個被點擊的項目都會加載更多的內容。事情是這樣的畫面：

電網桌面視圖：

這將是，如果沒有移動看來，這似乎是不得不很容易給我不同的HTML元素順序：

移動視圖：

現在我創造了這個HTML代碼（USI ng Bootstrap css）：

<div class="container"> 
    <div class="row"> 

     <div class="col-md-4 item"> 
      <a class="link" href="#emp_more_4" data-id="4">  
      </a> 
     </div> 

     <div class="col-md-12 emp_info" id="emp_more_4" style="display: none;"> 
      <div class="emp_info_con"> 
      </div> 
     </div> 

     <div class="col-md-4 module"> 
      <a class="link" href="#emp_more_3" data-id="3">  
      </a> 
     </div> 

     <div class="col-md-12 emp_info" id="emp_more_3" style="display: none;"> 
      <div class="emp_info_con"> 
      </div> 
     </div> 

     <div class="col-md-4 module"> 
      <a class="link" href="#emp_more_2" data-id="2">  
      </a> 
     </div> 

     <div class="col-md-12 emp_info" id="emp_more_2" style="display: none;"> 
      <div class="emp_info_con"> 
      </div> 
     </div> 

    </div> 

    <div class="row"> 

     <div class="col-md-4 module"> 
      <a class="link" href="#emp_more_1" data-id="1">  
      </a> 
     </div> 

     <div class="col-md-12 emp_info" id="emp_more_1" style="display: none;"> 
      <div class="emp_info_con"> 
      </div> 
     </div> 
    </div> 
</div> 

其中每個「emp_info」元素是那些包含更多項目內容的元素。

和jQuery代碼：

 jQuery('.employees a').click(function() { 
      var id = jQuery(this).data("id"); 
      jQuery('.employees .emp_info').hide(); 
      jQuery('.employees #emp_more_'+id).show(); 
     }); 

它加載更多的內容給每個項目，但它打破行和列的佈局。 你知道如何在桌面和移動視圖上保持網格佈局嗎？ 如果有人會有好主意，我可以不帶Bootstrap類地進行設計。

Answer 1

繼承人的解決方案，可以幫助你：

請對代碼回顧：

$(document).on('click', '.item a', function() { 
 
\t $(".emp_info").width($('.row').width() - 30); 
 
    $('.item').attr('style', ''); 
 
    $(this).closest('.item').css('margin-bottom', $(this).next().height()); 
 
    $('.emp_info').not($(this).next()).slideUp(); 
 
    $(this).next().slideToggle(function(){ 
 
    \t \t if($(this).is(':hidden')){ 
 
      $('.item').attr('style', ''); 
 
     } 
 
    }); 
 
}); 
 
$(window).on('resize', function(){ 
 
    $(".emp_info").width($('.row').width() - 30); 
 
});

.item a { 
 
    height: 50px; 
 
    background: #000; 
 
    margin-bottom: 5px; 
 
    display: block; 
 
} 
 

 
.item:nth-child(2) .emp_info { 
 
    background-color: #ff0; 
 
} 
 

 
.item:nth-child(3) .emp_info { 
 
    background-color: #eee; 
 
} 
 

 
.emp_info { 
 
    background-color: #f00; 
 
    margin-bottom: 10px; 
 
    height: 50px; 
 
    display: none; 
 
    position: absolute; 
 
    left: 15px; 
 
} 
 

 
.row { 
 
    position: relative; 
 
} 
 

 
.col-lg-1, 
 
.col-lg-10, 
 
.col-lg-11, 
 
.col-lg-12, 
 
.col-lg-2, 
 
.col-lg-3, 
 
.col-lg-4, 
 
.col-lg-5, 
 
.col-lg-6, 
 
.col-lg-7, 
 
.col-lg-8, 
 
.col-lg-9, 
 
.col-md-1, 
 
.col-md-10, 
 
.col-md-11, 
 
.col-md-12, 
 
.col-md-2, 
 
.col-md-3, 
 
.col-md-4, 
 
.col-md-5, 
 
.col-md-6, 
 
.col-md-7, 
 
.col-md-8, 
 
.col-md-9, 
 
.col-sm-1, 
 
.col-sm-10, 
 
.col-sm-11, 
 
.col-sm-12, 
 
.col-sm-2, 
 
.col-sm-3, 
 
.col-sm-4, 
 
.col-sm-5, 
 
.col-sm-6, 
 
.col-sm-7, 
 
.col-sm-8, 
 
.col-sm-9, 
 
.col-xs-1, 
 
.col-xs-10, 
 
.col-xs-11, 
 
.col-xs-12, 
 
.col-xs-2, 
 
.col-xs-3, 
 
.col-xs-4, 
 
.col-xs-5, 
 
.col-xs-6, 
 
.col-xs-7, 
 
.col-xs-8, 
 
.col-xs-9 { 
 
    position: static; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 

 
    <div class="col-sm-4 item"> 
 
     <a class="link" href="#emp_more_4" data-id="1"> 
 
     </a> 
 
     <div class="emp_info"> 
 
     <div class="emp_info_con"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-sm-4 item"> 
 
     <a class="link" href="#emp_more_4" data-id="2"> 
 
     </a> 
 
     <div class="emp_info"> 
 
     <div class="emp_info_con"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-sm-4 item"> 
 
     <a class="link" href="#emp_more_4" data-id="3"> 
 
     </a> 
 
     <div class="emp_info"> 
 
     <div class="emp_info_con"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 

 
    </div> 
 

 
    <div class="row"> 
 

 
    <div class="col-sm-4 item"> 
 
     <a class="link" href="#" data-id="4"> 
 
     </a> 
 
     <div class="emp_info"> 
 
     <div class="emp_info_con"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-sm-4 item"> 
 
     <a class="link" href="#" data-id="5"> 
 
     </a> 
 
     <div class="emp_info"> 
 
     <div class="emp_info_con"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>