Javascript 后退按钮和菜单导航

好吧，我正试图设计一个移动版的我的网站，我的菜单上卡住了

基本上目前我在页面上运行了一个简单的onClick，因此如果用户决定不想查看，请单击菜单上的内容，然后单击页面，菜单就会消失

但我真正想要的是一种使用浏览器上的后退按钮从菜单返回的方式。我猜这需要一些事件或设置一些东西，但我不知所措

我是个新手，所以请温柔一点，我希望社区能帮助我从哪里开始

---

我的主要问题是如何在我的HTML或JavaScript中使用浏览器上的后退按钮，如有任何关于如何继续的想法，我们将不胜感激。

仅更新JS版本：（适用于任何地方）

：目标

在ie中的实现存在缺陷。因此前一个实现不起作用。当用户直接在页面上执行某些操作时，哈希更改只会影响css，单击更改哈希的按钮，不幸的是，后退按钮不被视为页面的一部分

您需要的全部javascript是：

var menu = document.getElementById('menu');
window.addEventListener('hashchange', function(e) {
    if (location.hash != "#menu") {
        menu.style.display = "none";
    } else if (location.hash == "#menu") {
        menu.style.display = "block";
    }
});

仅Css版本：：

你只需要使用css就可以做到。是时候了解一下

：target

选择器了

它允许您将样式应用于url哈希片段，并且是页面上元素的id

演示：

因此，默认情况下我隐藏菜单，但如果匹配，则显示菜单。因为url中的hastags会影响浏览器历史记录，所以它可以完成您的请求

我第一次学的时候，感觉非常棒

#menu:target {
    display: block;
}

整个代码：

body {
    background-color: cornsilk;
}
.cont {
    width: 500px;
    margin: auto;
}

#menu {
    display: none;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    height: 100%;
    background-color: rgba(0,0,0,.3);
    margin: auto;

}

#menu > ul {
    width: 200px;

    list-style-type: none;
    background-color: #fff;
    margin: auto;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
}

#menu > ul li {
    padding: 20px 10px;
}

#menu:target {
    display: block;
}

---

您可以在打开菜单时更改页面的散列/片段。这是浏览器的历史事件，不会更改页面。您可以使用

onhashchange

检测以前的情况，这不会改变页面本身。谢谢，这真的很有帮助。或者您可以在打开菜单时查看历史记录。pushState（…）。我直接为它编写了一个基于js的迷你库。没有历史api或css

：target

。OP想要什么现在可以通过

var h=new hashNav（）轻松完成；h、 添加（“菜单”）我也刚刚在读这篇文章。不确定海报是否会用到这个，但谢谢你，先生，这帮了大忙。这在手机上有效吗？它很有效，只是不适用于IE11，而IE11正是我所使用的。我必须检查手机版本。但应该没问题，谢谢。对不起，一定有更好的办法。它适用于大多数浏览器，但不适用于我的windows phone或ie11。我想我需要一些严肃的技巧才能得到我想要的。这可能是必须的。我刚刚检查过，是的，它在ie11中不起作用，让我看看原因。非常感谢