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

How to toggle (hide / show) sidebar div using jQuery

提问by blasteralfred Ψ

I have 2 <div>s with ids Aand B. div Ahas a fixed width, which is taken as a sidebar.

我有 2 个<div>带有 idA和B. divA有固定的宽度，作为侧边栏。

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 Bshould stretch to fill the empty space. On second click, the sidebar may reappear to the previous position and div Bshould shrink back to the previous width.

我有<a id="toggle">toggle</a>它作为一个切换按钮。单击切换按钮时，侧边栏可能会隐藏到左侧并且 divB应拉伸以填充空白空间。在第二次点击时，侧边栏可能会重新出现在之前的位置并且 divB应该缩小到之前的宽度。

How can I get this done using jQuery?

如何使用 jQuery 完成此操作？

采纳答案by Hussein

$('button').toggle(
function() {
    $('#B').css('left', '0')
}, function() {
    $('#B').css('left', '200px')
})

Check working example at http://jsfiddle.net/hThGb/1/

在http://jsfiddle.net/hThGb/1/检查工作示例

You can also see any animated version at http://jsfiddle.net/hThGb/2/

您还可以在http://jsfiddle.net/hThGb/2/看到任何动画版本

回答by Kristoffer Sall-Storgaard

See this fiddlefor a preview and check the documentation for jquerys toggleand animatemethods.

请参阅此小提琴以进行预览并检查jquerys toggle和animate方法的文档。

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

Basically you animate on the properties that sets the layout.

基本上，您在设置布局的属性上设置动画。

A more advanced version:

更高级的版本：

$('#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});
})

This stops the previous animation, clears animation queue and begins the new animation.

这将停止之前的动画，清除动画队列并开始新的动画。

回答by Kajal Solanki

You can visit w3school for the solution on this the link is hereand there is another example also available that might surely help, Take a look

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

回答by xkem

The following will work with new versions of jQuery.

以下将适用于新版本的 jQuery。

$(window).on('load', function(){

    var toggle = false;

    $('button').click(function() {
        toggle = !toggle;

        if(toggle){
            $('#B').animate({left: 0});
        }
        else{
            $('#B').animate({left: 200});
        }

    });
});

回答by antelove

Using Javascript

使用 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;    
}

<button id="toogle">Max</button>
<div id="side">Sidebar</div>
<div id="main">Main</div>

回答by Jafar Ali

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


<div>
    <a class="trigger" href="#">
        <img id="icon-menu" alt='menu' height='50' src="Images/Push Pin.png" width='50' />
    </a>
</div>
<div id="sidebar">
</div>

Instead #sidebar give the id of ur div.

相反，#sidebar 给出你的 div 的 id。

回答by EMMERICH

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

and in the CSS:

并在 CSS 中：

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

回答by S. Mayol

This help to hide and show the sidebar, and the content take place of the empty space left by the sidebar.

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

<div id="A">Sidebar</div>
<div id="B"><button>toggle</button>
Content here: Bla, bla, bla
</div>


//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;
}