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

Question

我有两个<div>ids A和B.div 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应该拉伸以填充空白区域.在第二次单击时,侧边栏可能会重新出现在前一个位置,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/看到任何动画版本

Answer 2

请参阅此小提琴进行预览,并查看jquerys切换和动画方法的文档.

$('#toggle').toggle(function(){
    $('#A').animate({width:0});
    $('#B').animate({left:0});
},function(){
    $('#A').animate({width:200});
    $('#B').animate({left:200});
});

基本上,您可以设置设置布局的属性.

更高级的版本:

$('#toggle').toggle(function(){
    $('#A').stop(true).animate({width:0});
    $('#B').stop(true).animate({left:0});
},function(){
    $('#A').stop(true).animate({width:200});
    $('#B').stop(true).animate({left:200});
})

这将停止上一个动画,清除动画队列并开始新动画.

Answer 3

您可以访问 w3school 获取此问题的解决方案，链接在这里，还有另一个示例可能肯定会有所帮助， 请看一下