jquery - 尝试创建两个 50% 高的 div，堆叠在推/拉 "hideTop/showBoth/HideBottom"配置中

Question

我尝试实现的布局解决方案涉及一个 960px(W) x 100%(H) 居中包装器。在该包装器中有两个堆叠的 div(960px(W) x 50%(H) 堆叠在另一个 960px(W) x 50%(H) 之上)。我正在寻找的界面是三个不同的 View ，使用 jquery 进行动画处理。

1. (默认)两个 div 都可见
2. 单击向下箭头图标并让顶部 div 将其高度增加到 99%，留下 1% 的显示(在其上提供向上箭头图标以切换回 50/50 View )。
3. 点击向上箭头图标并让底部 div 将其高度增加到 99%，留下 1% 的显示和向下箭头图标以切换回 50/50 View 。

推和拉，两个同等重要的内容，全屏显示效果更好。

Answer 1

这是一个好的开始:http://jsfiddle.net/e2G6Y/ .
如果你想让它在多个类上工作，你将需要修改类检测部分 (if($(this).attr("class") == "equal"))。
您还需要根据需要添加重新打开的箭头。