仅限CSS，两个具有不同行为的侧边栏

Question

这是我的情况：

所以我试图通过点击另一个div来切换侧边栏。它是一个100％高度的侧边栏，固定在视口的右侧。本质上我试图围绕50px宽切换div和250px宽边栏div包裹300px div，我想使用负边距右像素值隐藏侧边栏部分。使用.toggle：active选择器（所以当单击切换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;
}

Here's the jsfiddle!

这是我的问题：

当.toggle：active参与时，如何定位.wrapper来更改css属性？另外，如何指定侧边栏何时可见以及何时不可见？

我是Javascript的新手，但由于回调功能，似乎我需要它才能做到这一点。如果只有CSS，我会倾向于那个解决方案。请注意，我想使用margin-right，以便我可以选择稍后使用CSS过渡来动画我的元素左右滑动。

Answer 1

仅CSS解决方案

DEMO：http://jsfiddle.net/Victornpb/yJYJC/30/

请使用：

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

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

Javascript解决方案

DEMO：http://jsfiddle.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

仅限CSS的解决方案（ DEMO ）：

<div class="wrapper">    
  <label for="toggle">
     Toggle
  </label>    
  <input id="toggle" type="checkbox" />
  <div class="cart">Cart</div>
</div>

（隐藏的复选框用于确定切换状态）

#toggle {    
  display:none; /* hide checkbox */
}

/* the label associated with the checkbox (trigger) */
label{
  display:block;
}

/* move the div adjacent to the input (.cart) inside the visible area */
/* when the input is checked */
#toggle:checked ~ .cart{
  right:0;
}

/* the div that's being toggled */
.cart {
  position: absolute;
  width: 250px;
  height: 100%;
  right: -250px;
}

Answer 3

我建议使用jQuery。它很简单，错误的机会也少了。

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

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

Answer 4

:active仅适用于链接（即<a>代码），因此无法在.toggle上使用，因为它是<div>。即使你把它放在链接上，我也不认为它会做你想做的事情，并且没有办法“瞄准”父母。像这样<a>周围的<div>也很奇怪，你不应该那样。

所以，你需要javascript，是的。但是你无法在javascript中真正定位一个类。你有两个解决方案：

如果你可以在包装器中添加id，你可以在javascript中创建一个能够切换侧边栏状态的函数：
```
<div class="wrapper" id="myId">
    <a href="#">
        <div class="toggle"
             onclick="document.getElementById('myId').style.marginRight = (document.getElementById('myId').style.marginRight == '0') ? '-250px' : '0';">Toggle</div>
    </a>
    <div class="cart">Cart</div>
</div>
```
注意：部分(document.getElementById('myId').style.marginRight == '0') ? '-250px' : '0'测试margin-right是否为0，如果是，则将其更改为-250px，反之亦然。我在这里做的可能不是最好的方法，但是我想把它限制在一些简短的东西，所以你可以这样使用它，如果你不是很好地理解javascript。当你能更好地了解它时，你将能够改进它。此外，您必须将onclick放在您拥有的每个.toggle div上...您可以使用事件处理程序，但我很确定您不知道这意味着什么，可能不会简单地复制粘贴这个是一个好主意。你可以随时使用第二点，因为它使事情相对容易理解。
如果你真的想要class（或者需要重复一遍），你必须使用jQuery, a javascript library，加上这个（最好是<head>）：
```
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
```
然后你可以添加它（最好仍然是头部）：
```
<script type="text/javascript">
    $(document).ready( function()
    {
        var cart_visible = false;

        $('.toggle').on('click', function()
        {
            if ( cart_visible )
                $('.wrapper').css('margin-right', '-250px');
            else
                $('.wrapper').css('margin-right', '0');

            cart_visible = !cart_visible;
        });
    });
</script>
```
这次我使用了布尔值（以true或false作为值）来检查购物车是否可见，同时更改每次点击时的值{ {1}}。这和以前一样，只是在-250px和0之间切换，但你不需要把它放在你可能创建的每个.toggle中，它可以用于类。它让你使用jQuery（尽管我认为这不是一个问题）

我真的不明白你为什么要改变margin-right ...如果你只想让它消失，你可以使用margin-right，或者如果你真的想改变位置，你可以使用display: none;（在这种情况下）。

Answer 5

仅限CSS，两个具有不同行为的侧边栏

两个不同的仅CSS 动画侧边栏：

受@vitim.us启发，使用悬停进行显示/隐藏
受@niceass启发，使用隐藏的复选框 点击进行展示/隐藏

特点：

平滑动画
侧栏上的垂直文字（打开时旋转）
显示侧边栏时调整身体大小
正文和侧边栏的清洁框
可滚动的侧边栏内容（显示他的滚动条）。

`hover`（从@vitim.us's answer分叉）并进行了一些改进

如果没有完全确定，有一些方法

写 Open cart / Your cart verticaly
使用CSS中的不可破坏空间，在打开/您的和购物车之间禁止换行符。< / LI>
动态调整主要内容，同时显示侧栏。

body {
    font-family: sans;
    font-weight: normal;
    font-size: 10pt;
}
.main {
    width: calc( 100% - 3em );
    transition: width ease 1300ms;
}
.wrapper:hover ~ .main {
    width: calc( 100% - 17em );
}
h1 {
    font-weight: bold;
    font-size: 1.3 em;
}
h2 {
    font-weight: bold;
    font-size: 1.15 em;
}
.wrapper{
    position:fixed;
    width: 16em;
    height:100%;
    background-color:orange;
    top:0;
    right:0;
    margin-right:-14em;
    /* Makes opening smoothly */
    transition: margin-right ease 1300ms;
    -moz-transition: margin-right ease 1300ms;
    -webkit-transition: margin-right ease 1300ms;
    -o-transition: margin-right ease 1300ms;
}
.inner {
    position: relative;
    width: 100%;
    float: left;
    display: inline-block;
    transform: rotate(90deg)  translate(-3em,0em);
    transition: transform ease 1300ms;
}

/* opened */
.wrapper.opened,
.wrapper:hover{
    margin-right:0px;
}

.toggle {
  position:relative;
    display:block;
    width:2em;
    height:100%;
    background-color:#CCC;
    float:left;
    font-weight: bold;
    text-align: center;
    padding-top: 50%;
    transition: background-color ease 1300ms;
    transition: color ease 1300ms;
}

/* toggle style when wrapper is hovered */
.wrapper:hover .toggle{
	background-color: #555;
    color: white;
}
.wrapper:hover .toggle .inner{
    transform: rotate(270deg);
}
/* Warn: there is NBSP, not spaces, after Open/Your */
.wrapper:not(:hover) .toggle .inner:before{
	content:"Open";
}
.wrapper:hover .toggle .inner:before{
	content:"Your";
}

.cart {
    position: relative;
    width:13.5em;
    height:100%;
    background-color:rgba(255,255,255,.4);
    float:right;
    padding: .2em;
    overflow: scroll;
}

<div class="wrapper">
    <div class="toggle"><div class="inner">&nbsp;cart</div></div>
    <div class="cart">
        <h2>Cart</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
       </p>
    </div>
</div>
<div class="main">
<h1>Little <i>no-js</i> css side-bar demo</h1>
<p>This little demo let you see how a side-bar could be done without being using javascript...</p>
 <h2>Lorem Ipsum</h2>   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
   </p>

</div>

`toggle:checked`（从@niceass's answer分叉）

相同的改进，但使用隐形复选框，因此您必须单击侧边栏的（文本）才能打开它们。

body {
    font-family: sans;
    font-weight: normal;
    font-size: 10pt;
}
#toggle { display:none; }
.main {
    width: calc( 100% - 3em );
    transition: width ease 1300ms;
}
#toggle:checked ~ .main {
    width: calc( 100% - 17em );
}
h1 {
    font-weight: bold;
    font-size: 1.3 em;
}
h2 {
    font-weight: bold;
    font-size: 1.15 em;
}
.wrapper{
    position:fixed;
    width: 16em;
    height:100%;
    background-color:orange;
    top:0;
    right:0;
    margin-right:-14em;
    /* Makes opening smoothly */
    transition: margin-right ease 1300ms;
    -moz-transition: margin-right ease 1300ms;
    -webkit-transition: margin-right ease 1300ms;
    -o-transition: margin-right ease 1300ms;
}
#toggle:checked ~ .wrapper {
    margin-right: 0pt;
}
#but {
    position: relative;
    width: 100%;
    float: left;
    display: inline-block;
    transform: rotate(270deg)  translate(-3em,0em);
    transition: transform ease 1300ms;
}
/* opened */
#zone {
  position:relative;
    display:block;
    width:2em;
    height:100%;
    background-color:#CCC;
    float:left;
    font-weight: bold;
    text-align: center;
    padding-top: 50%;
    transition: background-color ease 1300ms;
    transition: color ease 1300ms;
}

/* toggle style when wrapper is hovered */
#toggle:checked ~ .wrapper #zone {
	background-color: #555;
    color: white;
}
#toggle:checked ~ .wrapper #zone #but {
    color: white;
    transform: rotate(90deg);
}
#toggle:not(checked) ~ .wrapper #zone #but:before {
	content:"Open ";    /* non break space &#160; */
}
#toggle:checked ~ .wrapper #zone #but:before{
	content:"☒ Your ";
}
#toggle:not(checked) ~ .wrapper #zone #but:after {
	content:" ☐";        /* figure space &#8199; */
}
#toggle:checked ~ .wrapper #zone #but:after {
	content:"";
}
.cart {
    position: relative;
    width:13.5em;
    height:100%;
    background-color:rgba(255,255,255,.4);
    float:right;
    padding: .2em;
    overflow: scroll;
}

<input id="toggle" type="checkbox" />  
<div class="wrapper">
    <div id="zone"><label for="toggle" id="but">chart</label></div>
    <div class="cart">
        <h2>Cart</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
       </p>
    </div>
</div>
<div class="main">
<h1>Little <i>no-js</i> css side-bar demo</h1>
<p>This little demo let you see how a side-bar could be done without being using javascript...</p>
 <h2>Lorem Ipsum</h2>   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
   </p>

</div>

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

5 个答案:

仅CSS解决方案

Javascript解决方案

仅限CSS，两个具有不同行为的侧边栏

`hover`（从@vitim.us's answer分叉）并进行了一些改进

`toggle:checked`（从@niceass's answer分叉）

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

5 个答案:

仅CSS解决方案

Javascript解决方案

仅限CSS，两个具有不同行为的侧边栏

hover（从@vitim.us's answer分叉）并进行了一些改进

toggle:checked（从@niceass's answer分叉）

`hover`（从@vitim.us's answer分叉）并进行了一些改进

`toggle:checked`（从@niceass's answer分叉）