javascript - 带复选框 hack 的抽屉菜单，链接指向同一页面上的 anchor

Question

所以我使用复选框 hack 为我的网站制作了一个抽屉菜单。更具体地说，我 99% 的代码都基于本教程:http://www.designcouch.com/home/why/2014/04/23/pure-css-drawer-menu/

除了一件小事外，一切都像魅力一样运作。我抽屉中的一个链接链接到索引页底部的一个部门。由于我使用的是主图，我希望人们能够使用此链接转到 div。现在的问题是，当我单击该链接时，抽屉保持打开状态!所以复选框不会取消选中。我想这是有道理的，因为没有加载新页面。

我考虑过使用一点 javascript，在单击链接时取消选中复选框，但如果你们有更好的解决方案，我想先听听这里。没有什么反对 JS 的，但是制作一个纯 css 抽屉似乎有点傻，那仍然需要 javascript 才能正常运行:p关于如何在没有 javascript 的情况下解决这个问题的任何想法？

提前致谢!

Answer 1

所以这已经是将近 4 年前的事了，但前几天我遇到了同样的问题，在经历了很多挫折之后，我来到 StackOverflow 寻找隧道尽头的曙光……但没有…… . 直到现在

无论如何，我找到了一个不错的方法来实现所要求的。我没有使用复选框切换菜单，而是在标签聚焦后切换它，所以:

label.mobile-menu-toggle:focus + aside {
  transform: translateY(0);
  opacity: 1;
}

一旦用户点击链接，它就会向下滚动页面，并且由于焦点已从标签上移开，移动菜单会滑回其所属的位置。