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

Question

有以下谜题：页面上有两个表格和一个按钮。 table1 立即显示，table2 在按钮切换的帮助下显示。这个想法是，单击按钮不仅会导致 table2 的扩展，而且应该更改 table1 的最大高度（当 table2 展开时，表 1 变小，当 table2 不显示时，table1 变大）。我使用淘汰赛，它的点击不适用于 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
   };

你有什么想法吗？

Answer 1

我这样做是为了切换表格 - 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%;
}