Question

在以下示例中，我使用复选框制作纯CSS下拉导航，也可在此 jsFiddle example 中使用。

打开小提琴，单击＆＃34;菜单＆＃34;，单击＆＃34;链接1＆＃34;，然后单击＆＃34;返回＆＃34;浏览器工具栏上的按钮，如您所见，复选框保持选中状态，因此导航仍处于打开状态。

我的问题是 - 在从浏览器历史记录返回时，是否可以重置该复选框以自动取消选中？有什么建议吗？我需要使用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元素，以将效果应用于所有输入字段。

Answer 2

尝试添加以下内容：

$( document ).ready(function() {
  $("#m").prop('checked',false );
});

＆＃13;

$( document ).ready(function() {
  $("#m").prop('checked',false );
});

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>

＆＃13;

Answer 3

除了其他注释之外，如果您正在编写一个使用pushState / replaceState的AJAX驱动页面，并且后退按钮实际上不会重新加载页面（即没有HTTP请求），您可以监听popState事件并清除复选框。

window.onpopstate = function(event) {
   $("#m").prop('checked',false );
};

HTML 5功能并非在所有浏览器中得到完全支持（虽然支持非常好）

https://developer.mozilla.org/en-US/docs/Web/Events/popstate

其他选项是使用诸如history.js，jquery-bbq，sammyjs等库。

Answer 4

将autocomplete="off"添加到复选框。

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

4 个答案: