Question

我的标题中有一个复选框和标签，用于侧边菜单。

但是，它无效并且被检查的选择器无效。

单击时应显示侧栏。

但是，当我的标题不涉及代码时，它可以在这里工作：https://jsfiddle.net/jpjL3hhp/1/

导致问题的原因是什么？

工作代码：

<input type="checkbox" id="menu_collapse_icon">
<label for="menu_collapse_icon" class="menu_collapse_icon_label">Show Menu</label>
<div class="side-navigation">
    <ul>
        <li>
            <a href="#">Login</a>
        </li>
    </ul>
</div>

不工作：

<header>
<input type="checkbox" id="menu_collapse_icon">
<label for="menu_collapse_icon" class="menu_collapse_icon_label">Show Menu</label>
<div class="side-navigation">
    <ul>
        <li>
            <a href="#">Login</a>
        </li>
    </ul>
</div>
</header>

这用于检查：

#menu_collapse_icon:checked ~ .side-navigation {
    margin-right: 0;
}

Answer 1

问题是你的HTML结构。

您正在使用#menu_collapse_icon:checked ~ .side-navigation作为选择器。在您与所有header集成的非工作示例中，它不起作用，因为您的.side-navigation未被选中，因为它与#menu_collapse_icon不在同一级别。

因此，如果您将.side-navigation置于与#menu_collapse_icon相同的级别，那么它将起作用。

像这样：

.side-navigation {
  right: 0;
  height: 100%;
  background-color: white;
  width: 200px;
  margin-top: 106px;
  margin-right: -200px;
  transition: margin-right 0.5s ease;
  position: fixed;
}
#menu_collapse_icon:checked ~ .side-navigation {
  margin-right: 0;
}
header {
  position: fixed;
  height: 100px;
  background-color: blue;
  width: 100%;
}
header nav ul li {
  float: left;
}

<header>
  <div class="max-container">
    <input type="checkbox" id="menu_collapse_icon">
    <label for="menu_collapse_icon" class="menu_collapse_icon_label">
      Show Menu
    </label>
    <div class="side-navigation">
      <ul>
        <li>	<a href="#">Login</a>

        </li>
        <li>	<a href="#">Jobs</a>

        </li>
        <li>	<a href="#">Employers</a>

        </li>
      </ul>
    </div>
  </div>
</header>

检查CSS问题复选框在我的标题中不起作用

1 个答案: