javascript - 重置复选框选中状态从历史记录中返回

Question

在下面的示例中，我使用复选框制作纯 CSS 下拉导航，也可在 jsFiddle example 中使用.

打开那个 fiddle ，点击“菜单”，点击“链接 1”，然后点击浏览器工具栏上的“后退”按钮，您可以看到复选框保持选中状态，因此导航仍然打开。

我的问题是 - 从浏览器历史记录返回时是否可以自动将该复选框重置为未选中状态？有什么建议吗？我需要使用 Javascript/jQuery 吗？

HTML

<label for="m">Menu</label>
<input id="m" type="checkbox">
<nav id="n">
  <ul>
    <li><a href="//example.com">Link 1</a></li>
  </ul>
</nav>

CSS

#n {
  display: none;
}
#m:checked ~ #n {
  display: block;
}

Answer 1

无需 JS 或 CSS，只需将 autocomplete="off" 添加到复选框即可。这将阻止浏览器缓存“已检查”状态。

示例:https://jsfiddle.net/6g5u8wkb/

此外，如果您有多个复选框，我相信您可以将 autocomplete="off" 添加到 form 元素以将效果应用于所有输入字段。