使用剔除处理程序调整div的大小，并在其他div中滑动。

Question

我将fullcalendar.js封装在div (content)中(我使用bootstrap3来设置大小)。

该页面的content区域目前设置为仅覆盖页面左侧的2/3 3rds，而右侧的另1/3页则为空。

右边保持空白/空，直到一个按钮被点击，然后ko将滑到一个侧面形式(id=“侧”)来占据空的空间。

我需要做的是，在30%为空白的情况下，不要以70%/30%的页面分割开始，我希望content区域实际上以100%/0开始。

然后，如果一个侧面是到位的，我想内容面积调整从100%/0%到70%/30%的网页，否则100%/0%。

因为有很多这样的页面，在看完约翰·爸爸的视频之后，我相信创建一个处理程序是最好的方法。

在过去的几个星期里，我一直在研究和尝试修改示例，以满足我的需要，但没有运气。

含量--Md-9和col-lg-9代表屏幕宽度的70%，侧型-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>

有人有什么想法吗？

谢谢

Answer 1

首先，将一个可观察的sideFormShowing添加到ViewModel的适当部分，并将其初始化为false。

其次，将data-bind="if: sideFormShowing"添加到HTML (BTW，我认为在HTML中，星号不允许作为大写字符)。

第三，从您的col-md-9 col-lg-9 div上的class属性中提取**content**，并向其添加以下绑定：

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

不要忘记第二个条目中类名列表和父类的引号。

现在，每当sideFormShowing为false时，内容div将占100%，而侧型div将不会呈现；如果为真，内容将收缩到70%，而该侧将呈现(我使用的是if绑定，而不是visible，因为您可能不希望运行虚拟元素绑定，除非应该显示侧格式。