javascript - 如何动态删除 Bootstrap 网格中的列？

Question

我有一个使用 Bootstrap 3 的网页。在此网页中，我有一个行。在该行中，我总是想显示三个项目。不过，我确实有10件。

当用户单击“删除”按钮时，我想删除一个项目，然后将下一个项目滑入。但是，我一直无法弄清楚如何在 Bootstrap 的上下文中执行此操作行。目前，我的项目布局如下:

<div class="row">
  <div class="col-xs-4">
    <div id="panel1" class="panel panel-default">
      <div class="panel-heading" style="background-color:#43258A; color:#fff;">Item #1</div>
      <div class="panel-body">
        Item #1 Details
      </div>
    </div>  
  </div>

  <div class="col-xs-4">
    <div id="panel2" class="panel panel-default">
      <div class="panel-heading" style="background-color:#249B73;">Item #2</div>
      <div class="panel-body">
        Item #2 Details
      </div>
    </div>  
  </div>

  <div class="col-xs-4">
    <div id="panel3" class="panel panel-default">
      <div class="panel-heading" style="background-color:#FFF635;">Item #3</div>
      <div class="panel-body">
        Item #3 Details
      </div>
    </div>  
  </div>

  <div class="col-xs-4">
    <div id="panel4" class="panel panel-default">
      <div class="panel-heading" style="background-color:#FE6E18;">Item #4</div>
      <div class="panel-body">
        Item #4 Details
      </div>
    </div>  
  </div>

  <div class="col-xs-4">
    <div id="panel5" class="panel panel-default">
      <div class="panel-heading" style="background-color:#F91721;">Item #5</div>
      <div class="panel-body">
        Item #5 Details
      </div>
    </div>  
  </div>

  <div class="col-xs-4">
    <div id="panel6" class="panel panel-default">
      <div class="panel-heading" style="background-color:#1BA8CE;">Item #6</div>
      <div class="panel-body">
        Item #6 Details
      </div>
    </div>  
  </div>

  <div class="col-xs-4">
    <div id="panel7" class="panel panel-default">
      <div class="panel-heading" style="background-color:#9B3B24; color:#fff;">Item #7</div>
      <div class="panel-body">
        Item #7 Details
      </div>
    </div>  
  </div>

  <div class="col-xs-4">
    <div id="panel8" class="panel panel-default">
      <div class="panel-heading" style="background-color:#0A4E38; color:#fff;">Item #8</div>
      <div class="panel-body">
        Item #8 Details
      </div>
    </div>  
  </div>

  <div class="col-xs-4">
    <div id="panel9" class="panel panel-default">
      <div class="panel-heading" style="background-color:#7BE7C3;">Item #9</div>
      <div class="panel-body">
        Item #9 Details
      </div>
    </div>  
  </div>

  <div class="col-xs-4">
    <div id="panel10" class="panel panel-default">
      <div class="panel-heading" style="background-color:#E7B22A;">Item #10</div>
      <div class="panel-body">
        Item #10 Details
      </div>
    </div>  
  </div>
</div>

<div class="row">
  <div class="col-xs-4">
    <button class="btn btn-default" onclick="removeFirst()">
    Remove This
    </button>
  </div>

  <div class="col-xs-4">
    <button class="btn btn-default" onclick="removeSecond()">
    Remove This
    </button>
  </div>

  <div class="col-xs-4">
    <button class="btn btn-default" onclick="removeThird()">
    Remove This
    </button>
  </div>
</div>

为了管理项目的状态，我有以下 JavaScript:

var visiblePanels = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

function removeFirst() {
  var panelId = '#panel' + visiblePanels[0];
  $(panelId).fadeOut({
    duration:500
  });
  visiblePanels.splice(0, 1);
}

function removeSecond() {
  var panelId = '#panel' + visiblePanels[1];
  $(panelId).fadeOut({
    duration:500
  });
  visiblePanels.splice(1, 1);
}

function removeThird() {
  var panelId = '#panel' + visiblePanels[2];
  $(panelId).fadeOut({
    duration:500
  });
  visiblePanels.splice(2, 1);
}

问题是，当删除项目时，我无法让项目向左滑动。此外，项目会换行，而不仅仅是隐藏在第一行之外。我创建了一个 fiddle here显示正在运行的代码。

Answer 1

添加parent()方法来隐藏整个Bootstrap列

$(panelId).parent().fadeOut({
   duration:500
});

Demo 1

要隐藏额外的伪行项目，您可能必须设置最大高度并隐藏父行上的溢出:

.row.some-class {
    max-height: 110px;
    overflow: hidden;
}

Demo 2

这里的缺点是您必须拥有永远不会改变高度的项目，并且您必须使用媒体查询来解决由于文本换行等而导致高度变化的情况。您可能最好使用一个取而代之的是许多 jQuery slider 。