jquery - 如何使用网格(Bootstrap 和 jQuery)将更多内容加载到元素中？

Question

我想创建 html&css 布局，其中包含行中的元素，并且单击的每个元素将加载更多内容。类似于此屏幕上的内容:

网格桌面 View :

如果不是移动 View ，这对我来说会很容易，这似乎必须有不同的 html 元素顺序:

移动 View :

现在我创建了这个 html 代码(使用 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();
        });

它会为每个元素加载更多内容，但会破坏列和行布局。 您知道如何在桌面和移动 View 上保持网格布局吗？ 如果有人有好主意，我愿意在没有 Bootstrap 类的情况下设计它。

Answer 1

这里有一个可以帮助您的解决方案:

请检查代码:

$(document).on('click', '.item a', function() {
	$(".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(){ 
  		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>