如何使用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屋！