Question

我的一些问题是尝试按照一些关于屏幕外导航菜单的教程，但它们不太符合我的要求。这是一个example

我想在这里完成的工作有点困难，我找不到答案。我想要的是按下标签并切换侧边栏。大多数教程都显示，但只有在这两者直接相关时。

<div class="header">
   <ul>
      <li>Menu1</li>
      <li>Menu2</li>
      <li>Menu3</li>
      <li>
          <input type="checkbox" class="sidebar__toggle" id="sidebar__toggle">
          <label for="sidebar__toggle">More info</label>
      </li>
   </ul>
</div>
<div class="content">
    ...rest of code here...
</div>
<div class="sidebar">
    ...sidebar code here...
</div>

和css（为了简单起见，我将省略其余部分）：

.sidebar__toggle:checked  ~ .sidebar {
    background-color: pink;
}

当我按照网络上的各种教程进行操作时，如果我们以某种方式相关，这就是方法，但是我的（或者我需要的那个）实际上不是。

Answer 1

只要标签使用id属性指向for标签，您就可以将复选框放在任意位置。我把它放在.sidebar下方：

＆＃13;

.sidebar__toggle:checked  ~ .sidebar {
    background-color: pink;
}

＆＃13;

<div class="header">
   <ul>
      <li>Menu1</li>
      <li>Menu2</li>
      <li>Menu3</li>
      <li>
          <label for="sidebar__toggle">More info</label>
      </li>
   </ul>
</div>
<div class="content">
    ...rest of code here...
</div>
<input type="checkbox" class="sidebar__toggle" id="sidebar__toggle">
<div class="sidebar">
    ...sidebar code here...
</div>

＆＃13;

可以：选中的选择器会影响与之无关的div吗？

1 个答案: