如何获取内容以响应边栏打开或关闭？

Question

好的，首先我知道之前已经问过这个问题，但我的侧边栏与其他有类似问题的人的工作方式不同。

回到我的问题。我在我正在制作的网站上有下面的侧边栏，当按钮切换时，它使用两个div，一个重叠另一个。 （目前页面的内容不在第二个div内，但最重要的是因为它更易于使用）。那么当边栏打开时如何让页面内容适合新的窗口大小，然后在关闭时返回呢？

＆＃13;

＆＃13;

#A,
#B {
  position: absolute;
  transition: all 800ms;
  -webkit-transition: all 800ms;
  -moz-transition: all 800ms;
  -ms-transition: all 800ms;
  -o-transition: all 800ms;
  margin-top: 20px;
}

#A {
  top: 0px;
  width: 14em;
  bottom: 0px;
  background: #939393;
  border: solid #000000 2px;
}

#B {
  top: 0px;
  left: 14em;
  right: 0;
  bottom: 0px;
  background: #3b3f45;
}

/*Hide the checkbox*/
#toggle {
  display: none;
}
.toggle label:hover, .toggle label:active, .toggle input:hover+label, .toggle input:active+label {
  border: 1px solid #000000;
}

.toggle label {
  position: fixed;
  border-radius: 4px;
  /*Set the left position to the same as the sidebar */
  left: 14em;     
  margin: 8em 1.5% 5px;
  z-index: 2;
  transition: all 800ms;
  -webkit-transition: all 800ms;
  -moz-transition: all 800ms;
  -ms-transition: all 800ms;
  -o-transition: all 800ms;
  background: #FFFFFF;
  padding: 4px 6px;
  background: #75787c;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-align: center;
}

/* Initial sidebar state */
#toggle ~ #A {
  left: 0;
}

/*move both containers on toggle*/
#toggle:checked ~ #A,
#toggle:checked ~ #B {
  left: -14em;
}

/*move label to follow sidebar animation*/
#toggle:checked,
#toggle:checked ~ label {
  left: 0;
  background: #FFFFFF;
}

＆＃13;

<div class="toggle">
  <div id="A">
    </div>
  <input id="toggle" type="checkbox" checked>
  <label for="toggle">Menu</label>
  <div id="B">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您正在错误地使用选择器~

  

element1 ~ element2选择器匹配element2的出现次数   之前是element1。

     

两个元素必须具有相同的父元素，但element2不必具有相同的元素   紧接着element1。

     

示例

     

为具有相同父级的<ul>元素前面的所有<p>元素设置背景颜色：

p ~ ul {
    background: #ff0000;
}

在您的情况下#toggle ~ #A和#toggle:checked ~ #A未被应用，因为#A前面没有#toggle。

所以只需像这样改变DOM中#A的位置：

#A, #B {
    position: absolute;
    transition: all 800ms;
    -webkit-transition: all 800ms;
    -moz-transition: all 800ms;
    -ms-transition: all 800ms;
    -o-transition: all 800ms;
    margin-top: 20px;
    box-sizing: border-box; /*The width and height properties (and min/max properties) includes content, padding and border, but not the margin*/
}
#A {
    top: 0px;
    width: 14em;
    bottom: 0px;
    background: #939393;
    border: solid #000000 2px;
}
#B {
    top: 0px;
    left: 14em;
    right: 0;
    bottom: 0px;
    background: #3b3f45;
}
/*Hide the checkbox*/
 #toggle {
    display: none;
}
.toggle label:hover, .toggle label:active, .toggle input:hover+label, .toggle input:active+label {
    border: 1px solid #000000;
}
.toggle label {
    position: fixed;
    border-radius: 4px;
    /*Set the left position to the same as the sidebar */
    left: 14em;
    margin: 8em 1.5% 5px;
    z-index: 2;
    transition: all 800ms;
    -webkit-transition: all 800ms;
    -moz-transition: all 800ms;
    -ms-transition: all 800ms;
    -o-transition: all 800ms;
    background: #FFFFFF;
    padding: 4px 6px;
    background: #75787c;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-align: center;
}
/* Initial sidebar state */
 #toggle ~ #A {
    left: 0;
}
/*move both containers on toggle*/
 #toggle:checked ~ #A, #toggle:checked ~ #B {
    left: -14em;
}
/*move label to follow sidebar animation*/
 #toggle:checked, #toggle:checked ~ label {
    left: 0;
    background: #FFFFFF;
}

<div class="toggle">
    <input id="toggle" type="checkbox">
    <label for="toggle">Menu</label>
    <div id="A"></div>
    <div id="B"></div>
</div>

请注意，我还将box-sizing: border-box设置为#A, #B，以便在计算宽度（14em）时包含边框。如果您将其删除，则可以看到打开它时border-right #A的效果如何。