使用CSS/JavaScript将侧栏div与另一个div切换

Question

我的情况是：

所以我尝试通过单击另一个div来切换侧栏。它是一个100%高度的边栏，固定在视区的右侧。本质上，我试图将一个300px的div包装在50px宽的切换div和250px宽的侧边栏div周围，并且我想用一个负的右边距像素值来隐藏侧边栏部分。使用.toggle：active选择器（所以当单击toggle div时会发生这种情况），我想通过将边距右的像素值设置回0px来显示侧栏部分。

到目前为止的代码：

<div class="wrapper">
  <a href="#">
    <div class="toggle">Toggle</div>
  </a>
  <div class="cart">Cart</div>
</div>

CSS到目前为止：

.wrapper {
  position:fixed;
  width:300px;
  height:100%;
  background-color:orange;
  top:0;
  right:0;
  margin-right:-250px;
}
.toggle {
  position:relative;
  display:block;
  width:50px;
  height:100%;
  background-color:grey;
  float:left;
}
.toggle:active .wrapper {
  margin-right:0px;
}
.cart {
  position: relative;
  width:250px;
  height:100%;
  background-color:red;
  float:right;
}

这是jsfiddle！

我的问题是：

当.toggle：active处于激活状态时，我如何锁定.wrapper来更改css属性？另外，我如何指定边栏什么时候可见，什么时候不可见？

我是Javascript的新手，但由于使用了回调函数，我似乎需要Javascript来完成这项工作。如果只有CSS是可能的，我会倾向于这种解决方案。请注意，我想使用右边距，这样我就可以选择以后使用CSS转换来使我的元素向左和向右滑动。

Answer 1

演示:http://jsfidle.net/victornpb/yjyjc/30/

就用这个：

/* Closed */
.wrapper{
    margin-right:-250px; 
}

/* Opened */
.wrapper:hover{
    margin-right:0px;
}

演示:http://jsfidle.net/victornpb/yjyjc/6/

JS：

var wrapper = document.getElementsByClassName('wrapper')[0];
var toggle = document.getElementsByClassName('toggle')[0];

window.onload=function(){

    toggle.onclick=function(){
        wrapper.classList.toggle('opened'); 
    }

}

CSS：

.wrapper{
    position:fixed;
    width:300px;
    height:100%;
    background-color:orange;
    top:0;
    right:0;
    margin-right:-250px;
}
.wrapper.opened{
    margin-right:0px;
}

Answer 2

为此，我建议使用jQuery。它是简单的和较少的机会错误。

$('.toggle').click(function() {
    $('.cart').toggle();
});

http://api.jquery.com/toggle/