-2

我正在使用下面的代码来滑动我的导航菜单

$(document).ready(function(){
 $("#flipnav").click(function(){
    $("nav").slideToggle("slow");
    }); 
});

但是在浏览到另一个页面或刷新导航时又回来了。但是如何保留此更改以使导航保持隐藏状态，直到用户单击以再次显示导航并且即使浏览到另一个页面也保持不变（隐藏）？

更远

if(sessionStorage["navigationMoved"]== "true"){

  $(document).ready(function(){
 $("#flipnav").ready(function(){
    $("nav").slideToggle("slow");
    }); 
}); 

 $(document).ready(function(){
$('#flipnav').toggle(function(){
  $('#content').animate({
   top:"0%"
 });
}, 

function(){
  $('#content').animate({
  top:"2%"
  });     
});
});

}
4

2 回答 2

1

您可以直接在每个页面的 HTML 中对菜单中的更改进行硬编码，或者如果不可能，则使用 cookie 或本地存储，因为 HTML 是无状态的，并且不会记住您在新页面加载后所做的更改。

编辑：

杰兹

您必须存储菜单是否在每个 slideToggle 上可见，然后在页面加载时检查该值以相应地设置菜单

var isSet = localStorage.getItem('nav');
document.getElementsByTagName('nav')[0].style.display = isSet ? 'block' : 'none';

$(document).ready(function () {
    $("#flipnav").click(function () {
        $("nav").slideToggle("slow", function() {
            localStorage.setItem('nav', $("nav").is(':visible'));
        });
    });
});

我倾向于使用 localStorage，但 sessionStorage 是同一个 HTML5 Web 存储 API 的一部分，因此如果您正在寻找仅对会话的持久性，则可以使用它。

对于较旧的浏览器， MDN有一个回退到 cookie 的 polyfill，因此您可以始终如一地使用 Web 存储语法，而不必担心不支持的浏览器。

于 2013-03-24T18:04:40.500 回答
0

您必须在页面加载并重置操作时进行检查。您可以使用 sessionStorage 在页面重新加载或更改时保存信息。

所以

$(document).ready(function(){
 $("#flipnav").click(function(){
    $("nav").slideToggle("slow");
    }); 
    sessionStorage["navigationMoved"] = true;
});

然后，当你加载一个新页面时，你必须有这样的代码

if(sessionStorage["navigationMoved"]){
    $(document).ready(function(){
       $("#flipnav").click(function(){
       $("nav").slideToggle("slow");
     }); 
     }); 
}

当您重新加载页面时，它会根据提供的 HTML/Javascript/CSS 完全重新呈现站点。因此，除非您明确保存并检查信息，否则它不会“记住”以前的状态

于 2013-03-24T18:04:58.330 回答