通过单击折叠按钮更改最大高度

change max-height by clicking collapse button

本文关键字:高度 按钮 单击 折叠      更新时间:2023-09-26

有以下难题:页面上有两个表格和一个按钮。立即显示表1,并通过按钮切换显示表2。这个想法是,单击按钮不仅会导致扩展table2,而且会改变table1的最大高度(当table2扩展时,表1变小,当table2不显示时,表1变大)。我使用knockout和它的点击不起作用bootstrap data-toggle="collapse"这就是为什么解决方案是由

完成的
<button type="button" class="btn btn-primary" data-bind="click: showAllEvents ">events</button>
this.showAllEvents = function () {
  //things to do
   $("#table2").toggle(); // show and hide table2
   };

你有什么想法吗?

我这样做是为了切换表格- codepen

重要的位-

html

<div class="table-container" data-bind="css: { expanded: expandTable}">

js

//Viewmodel
mynamespace.TableThing = function() {
  var self = this;
  self.expandTable= ko.observable(true);
  self.toggle = function(){
    if(self.expandTable()){
      self.expandTable(false)
    }else{
      self.expandTable(true)
    }
  }
};
css

.table-container{
  height:30px;
  overflow:hidden;
}
.table-container.expanded{
  height:100%;
}