Question

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

你有什么想法吗？

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%;
}

点击折叠按钮

1 个答案: