javascript - 如何使用 jQuery 切换(隐藏/显示)侧边栏 div

Question

我有 2 <div>带有 ID 的 s A和 B .分区 A具有固定宽度，作为侧边栏。

布局如下图所示:

样式如下:

html, body {
    margin: 0;
    padding: 0;
    border: 0;
}
#A, #B {
    position: absolute;
}
#A {
    top: 0px;
    width: 200px;
    bottom: 0px;
}
#B {
    top: 0px;
    left: 200px;
    right: 0;
    bottom: 0px;
}

我有 <a id="toggle">toggle</a>用作切换按钮。单击切换按钮时，侧边栏可能会隐藏到左侧和 div B应该拉伸(stretch)以填补空白。第二次点击时，侧边栏可能会重新出现到之前的位置和 div B应该缩小到以前的宽度。

如何使用 jQuery 完成此操作？

Answer 1

$('button').toggle(
function() {
    $('#B').css('left', '0')
}, function() {
    $('#B').css('left', '200px')
})

在 http://jsfiddle.net/hThGb/1/ 查看工作示例

您还可以在 http://jsfiddle.net/hThGb/2/ 查看任何动画版本