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＆amp; close-menu-primary，相互打开和关闭，显示或隐藏主菜单。

有人使用后退按钮时会出现问题。在这种情况下，它只切换open和close-menu-primary之间的按钮状态，这是一个汉堡和一个近距离图像。

如果您使浏览器足够小或使用移动设备，屏幕尺寸必须小于（最小宽度：768像素）和（最小高度：558像素）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）。通过在事件对象（标准JS）上添加return false（即jQuery专业）或调用preventDefault()，您可以取消导航并仅保留自己的处理程序。

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

1 个答案: