jquery - 水平折叠自举柱

标签 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 - 水平折叠自举柱,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59264283/

相关文章:

javascript - 根据名称删除属性

javascript - jQuery when()错误404

php - SQL查询和临时文件权限

html - 社交媒体图标,不在 div 内部居中

javascript - 下拉菜单上的jQuery悬停闪烁

jquery - 当您只知道父级时,jQuery更改某些具有特定css的子级的css

html - 单行居中,多行不居中

javascript - 自动调整 Canvas 中的图像,如果图像分辨率大于 Html5 中的 Canvas 大小

javascript - 表格行突出显示了将jQuery与IE结合使用时的所有版本

jquery - 向右浮动 div 在左侧创建灰色区域