使用带有标签的复选框来切换下拉菜单

Question

我正在尝试使用带有标签的复选框输入来切换下拉导航菜单的可见性 (display)。显示菜单时，我需要将标签向右移动才能仍然可以单击它，否则它会在菜单后面，无法关闭。

<div class="topnav">
  <label for="dropdown-toggle" id="dropdown-toggle-label"><i class="fas fa-bars"></i></label>
  <input type="checkbox" id="dropdown-toggle">
  <ul class="dropdown">
    ...
  </ul>
</div>

但是，按照我的设置方式，我正在尝试使用 + 选择器来

1. 选中复选框时显示.dropdown 菜单
2. 将 label 移开，使其可点击

这当然是不可能的，因为不是两者都可以直接跟随input。

.topnav .dropdown {
  display: none;
  position: absolute;

  z-index: 10;
  width: 33%;
}

#dropdown-toggle-label {
  display: block;
}

#dropdown-toggle-label:hover {
  cursor: pointer;
}

/* move the checkbox out of the way of the menu */
/* this should be done with the label instead */
#dropdown-toggle:checked {
  margin-left: 36%;
}

/* display the menu when the checkbox is checked */
#dropdown-toggle:checked + .dropdown{
  display: block;
}

如果可能的话，我想在不使用 JavaScript 的情况下解决这个问题。 如果缺少任何重要信息，请告诉我，我会提供。

Answer 1

没有 Javascript 也可以，但是您需要对标签和输入进行一些重新排列。这就是我所做的

<div class="topnav">
    <input type="checkbox" id="dropdown-toggle">
    <label for="dropdown-toggle" id="dropdown-toggle-label"><i class="fas fa-bars"></i></label>
      <ul class="dropdown">
        ...
      </ul>
    </div>

然后在 cursor:pointer 之后更改 CSS 代码

#dropdown-toggle:checked, #dropdown-toggle:checked + label{
  transform: translateX(300px); /*Any value you want*/
}

#dropdown-toggle:checked ~ .dropdown{
  display: block;
}