停止受by按钮影响的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，它们可以相互切换和关闭，以及显示或隐藏主菜单。

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

如果您的浏览器足够小或使用移动设备，屏幕尺寸必须小于(最小宽度: 768px)和(最小高度: 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)，这在其历史上创建了一个新的步骤，因此当用户单击back按钮时，浏览器只是返回到以前的状态(通常是相同的页面，但没有#wrap)。通过添加return false (这是jQuery的特性)或对事件对象调用preventDefault() (这是标准的JS)，您取消了导航，只留下您自己的处理程序来执行。