html - 停止 css 目标受后退按钮的影响

Question

我使用目标选择器放置和删除显示和隐藏导航菜单的类。问题在于，当用户使用浏览器上的后退按钮时，菜单状态会变得困惑。

这是我的CSS代码

<style>
#buttons-container a.close-menu-primary{display: none;}
#wrap:target #mainmenu{display: block;}
#wrap:target #buttons-container a.open-menu-primary{display: none;}
#wrap:target #buttons-container a.close-menu-primary{display: block;}
</style>

buttons-container 是一个带有两个按钮的 div，open-menu-primary 和 close-menu-primary，它们相互切换打开和关闭以及显示或隐藏主菜单。

当有人使用后退按钮时会出现问题。在这种情况下，它只会在打开和关闭菜单主要状态之间切换按钮状态，即汉堡和关闭图像。

如果您将浏览器设置得足够小或使用移动设备，您可以在此处查看实时版本，屏幕尺寸必须小于(min-width: 768px) 和(min-height: 558px) website with toggle by target selector

如果有可能以这种方式使用目标，或者是否有更好的方法无需脚本即可获得这种影响，希望有人能解决这个问题。提前致谢!

Answer 1

问题是...当用户按下后退按钮时，您是要返回菜单可见性的一种状态(即隐藏它还是取消隐藏它)，还是要返回一页？

我查看了您的链接页面 http://www.rieon.nl .我认为这是问题所在:

我假设您希望用户返回一页，而不仅仅是隐藏菜单。然后，你需要更改这段代码

jQuery( document ).ready(function( $ ) {
    $("#buttons-container a").click(function(){
        $("nav").toggleClass("main");
    });
});

并添加 return false 或 e.preventDefault():

jQuery( document ).ready(function( $ ) {
    $("#buttons-container a").click(function(e){
        $("nav").toggleClass("main");
        e.preventDefault();  // use either one
        return false;        // of these lines
    });
});

问题是，通过单击导航按钮上的链接，浏览器会执行显示菜单的 javascript 处理程序并导航到链接的 href 地址(即 #wrap)，并在其历史记录中创建一个新步骤，因此当用户点击后退按钮，浏览器返回到之前的状态(通常是相同的页面，但没有#wrap)。通过在事件对象上添加 return false(这是 jQuery 的特性)或调用 preventDefault()(这是标准的 JS)，您可以取消导航并只留下您自己的处理程序来执行.