Question

今天的摇摆！我有两个侧边栏和一个主要内容区域。当我单击按钮展开页面时，侧边栏应该消失，主要内容区域扩展到100％。（我试图做一些像quandl.com在api显示中所做的事情，这完全是漂亮的。）

这应该很简单！我只是添加了一个“apponly＆＃39;”类，它将主要内容设置为100％，侧边栏显示为：none。在我的控制器中，我得到了：

$scope.toggle = function() {
    $scope.displayed = !$scope.displayed;
}

在我的HTML中，我基本上得到了：

<div class="sidebar left" ng-class="{'apponly' : displayed }">
    --something something--
</div>
<div class="main-content" ng-class="{'apponly' : displayed }">
    <button class="btn btn-info device" ng-click="toggle()">[icon]</button>
    --something something--
</div>
<div class="sidebar right" ng-class="{'apponly' : displayed }">
    --something something--
</div>

...但它始终只适用于“适当的”课程。到第一个侧边栏和主要内容，并保持第二个侧边栏完好无损（缠绕到下一行，但仍然在那里，没有任何类别适用于＆＃39;应用）。

我试图设置一个plnk（http://plnkr.co/edit/ER4TPGexGnZ8knb4ThXQ?p=preview）但它根本不会工作[好吧这是一个愚蠢的疏忽，现在它确实有效，除非现在我更加困惑] 。真正简单明显的事我在这里完全不见了？

提前多多感谢！

Answer 1

AS PSL说，只需将您的plunker更新为<body ng-app="app" ng-controller="mainController">即可。它实际上做了你所期望的，所以问题可能在其他地方。

Answer 2

Welp，我不妨回答，因为我（有点）想出来了，你永远不会知道，我可能不是唯一一个被这种行为困惑的人。

它与动画有关。如果你把动画带走，那么一切都会表现出来。你重新加入它，事情又变得古怪了。

这是为什么？我不知道。但是当我从侧边栏上取下动画时（因此它们会立即消失），然后右侧边栏不会被推到下一行并最终保持不变，尽管添加的类应该使它消失。至少从行为来看，似乎浏览器试图在css类试图使该部分消失的同时渲染动画。哪个没有任何意义，b / c这在其他地方工作正常，但我所知道的是，如果你将动画留在主（中）部分，并在侧边栏上关闭它，那么一切都表现正常。

我不认为这是一个答案，因为它更像是一个＆＃34;嗯，修复它，如果不充分，＆＃34;这不是一个答案，更多的是为后人留下的解决方法，任何困惑的开发者的启蒙，以及任何高级开发者的娱乐。

切换跳过/错过第二个侧边栏

2 个答案: