html - 取消选中增加屏幕宽度的复选框的 CSS 是什么？

Question

当前单击 ☰ 标签会以移动宽度切换移动菜单。

增加屏幕宽度会隐藏移动菜单。

问题:如果左勾选，切换菜单在调整到移动宽度时仍然被勾选。

需要:当屏幕宽度超过 X 像素时取消选中的复选框。

到目前为止的代码:

#toggle {
  display: none;
  /*hide checkbox*/
}

#toggle:checked+.togglemenu {
  /*show menu on click*/
  display: block;
}

.togglemenu {
  width: 100px;
  height: 100px;
  background: #333;
  top: 60px;
  right: 0;
  position: absolute;
  display: none;
}


/*hide menu width increase*/

@media screen and (min-width: 480px) {
  .menu {
    display: none;
  }
}

<!--toggle-->
<li>
  <a class="menu" href="#">
    <label for="toggle">☰</label>
    <input id="toggle" type="checkbox">
    <div class="togglemenu">test</div>
  </a>
</li>

我确定我以前做过，只是随着时间的推移忘记了。有任何想法吗？感谢帮助，谢谢。

Answer 1

您将需要 JavaScript 来执行此操作。

您可以监听窗口调整大小，然后在达到所需大小时取消选中复选框。

window.addEventListener('resize', function() {
    if (window.matchMedia('(min-width: 480px)').matches) {
        document.getElementById('toggle').checked = false;
    }
}, true);