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

【问题标题】：How to toggle (hide / show) sidebar div using jQuery如何使用 jQuery 切换（隐藏/显示）侧边栏 div
【发布时间】：2011-07-31 10:02:42
【问题描述】：

我有 2 个<div>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;
}

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

如何使用 jQuery 完成这项工作？

【问题讨论】：

标签： javascript jquery css jquery-events

【解决方案1】：

您可以访问 w3school 获取解决方案，链接是 here 并且还有另一个示例可能会有所帮助， Take a look

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

    var toggle = false;

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

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

    });
});

【讨论】：

【解决方案4】：

$(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>

而不是#sidebar 给出你的 div 的 id。

【讨论】：

【解决方案5】：

这有助于隐藏和显示侧边栏，并且内容会占据侧边栏留下的空白区域。

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

【讨论】：

【解决方案6】：

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

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

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

【讨论】：

toggle 在 jQuery 1.8 中被弃用并在 jQuery 1.9 中被移除
toggle 在 jQuery 中是 still ，但签名与此答案所示不同。 toggle
嗨，为什么在 jQuery 上会显示/隐藏按钮，请参阅jsfiddle.net/7pf044cn

【解决方案7】：

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

在 CSS 中：

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

【讨论】：

【解决方案8】：

请参阅 this fiddle 进行预览，并查看有关 jquerys toggle 和 animate 方法的文档。

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

这会停止上一个动画，清除动画队列并开始新的动画。

【讨论】：