jquery - 水平折叠 Bootstrap 列

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>