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

Question

我有一个水平划分的Grid视图。具有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

我将类更改为对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>

MethodA()

Answer 2

您不能只切换col-lg-3和col-lg-4。根据计数，项目还需要为6列或12列。您需要计算可见类的数量，并将适当的类应用于所有类：

$(document).ready(function(){
    $('.btnShowHide1').on('click', function(){
        $('.row div:first-child').toggleClass('hidden');
        updateClasses();
    });
    $('.btnShowHide2').on('click', function(){
        $('.row div:nth-child(2)').toggleClass('hidden');
        updateClasses();
    });
    $('.btnShowHide3').on('click', function(){
        $('.row div:nth-child(3)').toggleClass('hidden');
        updateClasses();
    });
});

function updateClasses() {
    var visibleDivs = $('.row div').filter(function() {
        return !$(this).hasClass('hidden');
    });
    var colClass = 'col-lg-' + (12 / visibleDivs.length);
    $(visibleDivs).attr('class', colClass);  
}