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

我有2个

s，其中包含ID 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; } 

我有toggle作为切换按钮。 在切换按钮单击时，侧边栏可能会隐藏到左侧，而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以获得解决方案，此链接就在这里 ，还有另一个可用的示例，可能肯定有帮助， 看一看

Answer 4

以下内容适用于新版本的jQuery。

 $(window).on('load', function(){ var toggle = false; $('button').click(function() { toggle = !toggle; if(toggle){ $('#B').animate({left: 0}); } else{ $('#B').animate({left: 200}); } }); }); 

Answer 5

使用Javascript

 var side = document.querySelector("#side"); var main = document.querySelector("#main"); var togg = document.querySelector("#toogle"); var width = window.innerWidth; window.document.addEventListener("click", function() { if (side.clientWidth == 0) { // alert(side.clientWidth); side.style.width = "200px"; main.style.marginLeft = "200px"; main.style.width = (width - 200) + "px"; togg.innerHTML = "Min"; } else { // alert(side.clientWidth); side.style.width = "0"; main.style.marginLeft = "0"; main.style.width = width + "px"; togg.innerHTML = "Max"; } }, false); 

 button { width: 100px; position: relative; display: block; } div { position: absolute; left: 0; border: 3px solid #73AD21; display: inline-block; transition: 0.5s; } #side { left: 0; width: 0px; background-color: red; } #main { width: 100%; background-color: white; } 

 Max 
Sidebar
 
Main 

Answer 6

 $('#toggle').click(function() { $('#B').toggleClass('extended-panel'); $('#A').toggle(/** specify a time here for an animation */); }); 

在CSS中：

 .extended-panel { left: 0px !important; } 

Answer 7

 $(document).ready(function () { $(".trigger").click(function () { $("#sidebar").toggle("fast"); $("#sidebar").toggleClass("active"); return false; }); }); 
    
 
  

相反，＃sidebar会给出你的div的id。

Answer 8

这有助于隐藏和显示侧边栏，内容取代侧边栏留下的空白区域。

 
Sidebar
 
toggle Content here: Bla, bla, bla 
 //Toggle Hide/Show sidebar slowy $(document).ready(function(){ $('#B').click(function(e) { e.preventDefault(); $('#A').toggle('slow'); $('#B').toggleClass('extended-panel'); }); }); html, body { margin: 0; padding: 0; border: 0; } #A, #B { position: absolute; } #A { top: 0px; width: 200px; bottom: 0px; background:orange; } #B { top: 0px; left: 200px; right: 0; bottom: 0px; background:green; } /* makes the content take place of the SIDEBAR which is empty when is hided */ .extended-panel { left: 0px !important; }