如何使用jQuery切换(隐藏/显示)sidebar div [英] How to toggle (hide / show) sidebar div using jQuery
问题描述
我有2 < div>
s,其中id为 A
和 code>。 div
A
有一个固定宽度,作为边栏。
布局如下图所示: / p>
样式如下;
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
应该拉伸以填充空白空间。第二次点击时,边栏可能会重新显示在上一个位置,而且 B
应会缩回到上一个宽度。
如何使用jQuery来完成这项工作?
$ .toggle(
function(){
$('#B')。css('left','0')
},function(){
$ #B')。css('left','200px')
})
在 http://jsfiddle.net/hThGb/1/ 查看工作示例
您还可以在 http://jsfiddle.net/hThGb/2/ 查看所有动画版本。
I have 2 <div>
s with ids A
and B
. div A
has a fixed width, which is taken as a sidebar.
The layout looks like diagram below;
The styling is like below;
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;
}
I have <a id="toggle">toggle</a>
which acts as a toggle button. On the toggle button click, the sidebar may hide to the left and div B
should stretch to fill the empty space. On second click, the sidebar may reappear to the previous position and div B
should shrink back to the previous width.
How can I get this done using jQuery?
$('button').toggle(
function() {
$('#B').css('left', '0')
}, function() {
$('#B').css('left', '200px')
})
Check working example at http://jsfiddle.net/hThGb/1/
You can also see any animated version at http://jsfiddle.net/hThGb/2/
这篇关于如何使用jQuery切换(隐藏/显示)sidebar div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!