我有 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 完成此操作?
最佳答案
$('button').toggle(
function() {
$('#B').css('left', '0')
}, function() {
$('#B').css('left', '200px')
})
在 http://jsfiddle.net/hThGb/1/ 查看工作示例
您还可以在 http://jsfiddle.net/hThGb/2/ 查看任何动画版本
关于javascript - 如何使用 jQuery 切换(隐藏/显示)侧边栏 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5576893/