jquery - 展开折叠网格并调整为页面宽度

Question

我有一个水平划分的 GridView 。有 3 个按钮，可以相应地展开和折叠网格。但它没有调整到页面的宽度。我的意思是当我隐藏每个网格时，它应该占据整个页面。如图所示，我还需要将按钮放置在每个位置的顶部。按钮也应更改 + 和 -(展开折叠)。

我有的是

我需要的是

网格如下

<button class="btnShowHide1">First</button> 
<button class="btnShowHide2">Second</button> 
<button class="btnShowHide3">Third</button> 
<div class="row col-lg-12">
    <div class="col-lg-3">
      <h3>Section 1</h3>
    </div>
    <div class="col-lg-3">
      <h3>Section 2</h3>
    </div>
    <div class="col-lg-3">
      <h3>Section 3</h3>        
    </div>
  <div class="col-lg-3">
      <h3>Section 4</h3>        
    </div>
  </div>

我的详细代码是:Code

Answer 1

我更改了类以将 xs 用于 StackOverflow。

本质上，您需要根据剩余的可见列数派生要放置在单元格上的类。

$(document).ready(function() {
  var $columns = $('.row > div');
  
  $('.btnShowHide').on('click', function () {
    var columnIndex = $(this).data('column');
    var classToRemove = 'col-xs-'+ (12 / $columns.not('.hidden').length);
    
    $columns.removeClass(classToRemove);
    $columns.eq(columnIndex).toggleClass('hidden');
    $columns.addClass('col-xs-'+ (12 / $columns.not('.hidden').length));
  });
});

.hidden {
  display: none;
}

.row div {
  border: 1px red solid;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btnShowHide" data-column="0">First</button>
<button class="btnShowHide" data-column="1">Second</button>
<button class="btnShowHide" data-column="2">Third</button>
<div class="row">
  <div class="col-xs-3">
    <h3>Column 1</h3>
  </div>
  <div class="col-xs-3">
    <h3>Column 2</h3>
  </div>
  <div class="col-xs-3">
    <h3>Column 3</h3>
  </div>
  <div class="col-xs-3">
    <h3>Column 4</h3>
  </div>
</div>