jquery - 水平折叠 Bootstrap 列

标签 jquery html css twitter-bootstrap

我在一行中有 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>

最佳答案

这段代码将为您解决问题。有关详细信息,请参阅整页片段

$(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>

关于jquery - 水平折叠 Bootstrap 列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59264283/

相关文章:

html - 如何在 div 中垂直居中 span 和列表?

html - 我的 CSS 菜单栏适用于 firefox 但不适用于 chrome

jquery - 在 chrome 中,如果 div 内元素的宽度是 100% 比上面的第二个推

jquery - 使用 jQuery “each” 来设置树的样式

javascript - 通过 javascript 添加元素后,CSS 渐变不填充容器

html - 将按钮附加到表格行

html - 带有圆形和矩形的列表

jquery - 我可以在 jquery 中使用委托(delegate)来表示 future 的上下文元素吗?

jQuery/Css 对居中按钮使用 z-index 和相对位置?

html - HTML 中的 CSS 和图像