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

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>

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

选中复选框时显示 .dropdown 菜单
将 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;
}

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

Use checkbox with label to toggle dropdown menu

html

css

checkbox

css-selectors