Javascript 使用敲除处理程序调整div的大小并滑入其他div

我将fullcalendar.js包装在一个div（content）中（我使用bootstrap3设置大小）

页面的内容区域当前设置为仅覆盖页面左侧的2/3，而页面右侧的其他1/3区域为空白

在单击按钮之前，右侧保持空白/空白，然后ko将以侧边形式（id=“sideform”）滑动以占据空白

我需要做的是，我希望内容区域实际从100%/0%开始，而不是从页面分割70%/30%开始，其中30%为空白

然后，如果有一个侧形，我希望内容区域大小从页面的100%/0%重新调整到70%/30%，否则为100%/0%

因为有很多这样的页面，在看了John Papa的视频后，我相信创建一个处理程序将是最好的方式

在过去的几周里，我查看并试图修改示例以满足我的需要，但运气不佳

内容col-md-9和col-lg-9代表70%的屏幕宽度，侧窗体col-md-3和col-lg-3代表页面的其他1/3

页面当前设置为

 <div class="container">
     <div id="**content**" class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
         <div class="calendar" data-bind="fullCalendar: {}"></div>
     </div>    
     <div id="*sideform*" class="col-xs-12 col-sm-12 col-md-3 col-lg-3 pull-right">
         <!--ko router: { transition:'entrance', cacheViews:false,activate: true }-->
         <!--/ko-->
     </div>

 </div>

有人有什么想法吗

---

谢谢

首先，在ViewModel的相应部分添加一个可观察的，

sideFormShowing

，并将其初始化为false

其次，将

data bind=“if:sideFormShowing”

添加到

*sideform*

div中（顺便说一句，我认为HTML ID中不允许使用星号作为前导字符）

第三，将

col-md-9 col-lg-9

从

**content**

div的

类属性中取出，并向其添加以下绑定：

data-bind="css: {'col-md-9 col-lg-9': sideFormShowing,
  'col-md-12 col-lg-12': !sideFormShowing()}"

不要忘记类名列表周围的引号和第二个条目中的参数

现在，无论何时
sideFormShowing
为false，内容div将占100%，并且不会呈现sideform div；当它为真时，内容将收缩到70%，侧窗体将被呈现（我使用了
if
绑定而不是
visible
，因为除非侧窗体被显示，否则您可能不希望虚拟元素绑定运行