jquery - 水平折叠自举柱

Question

我连续有2列，我想水平折叠左边的一列（向左），将右边的一列留在左侧（这也使动画向左移动）。我目前正在使用Bootstrap 4.1和JQuery 3.4.1。 （很抱歉，这无法在代码段中运行，因为我不知道如何插入bootsrap）

$(document).ready(function(){
  $("#col1").collapse({
    toggle : true
  })

});

<!--Body-->
<div class="row h-50">
  <div style="background-color : red;" id="col1" class="col-6 collapse">
    <div class="h-100">contents to hide</div>
  </div>
  <div id="col2" class="col-6">
    <div style="background-color : gray" class="h-100">some other contents</div>
  </div>
</div>

<button data-toggle="collapse" data-target="#col1" class="button" id="somebutton">somebutton</button>

Answer 1

该代码段将为您解决问题。有关详细信息，请参见整页代码段

$(document).ready(function(){
  $("#col1").collapse({
    toggle : true
  })

});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!--Body-->
<div class="container">
<div class="row">
    <div id="col1" class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
  </div>
</div>
<button data-toggle="collapse" data-target="#col1" class="button" id="somebutton">somebutton</button>