如何在页面更改中保留Javascript状态

Question

我设置了手风琴式导航列表，以便在单击类别时打开显示链接到页面的子类别。

我想要做的是让手风琴导航列表在打开新页面时保持打开或关闭状态。

我已经收集到了Cookie，以保持刷新状态，但是如何在访问不同页面时保持状态？所有页面都有相同的手风琴导航列表。

Answer 1

我找到了一个解决方案，它采用了手风琴插件这里找到，http://www.i-marco.nl/weblog/archive/2010/02/27/yup_yet_another_jquery_accordi和jQuery的cookie.js插件

我添加的ID在HTNL加价，像这样的标题锚每日新闻，

<li> 
     <a id="m1" class="label" href="#">Sound/Audio Systems</a> 
     <ul class="acitem"> 
      <li><a href="products.php?sub_cat=PA_Systems">PA Systems</a></li> 
      <li><a href="#">Loudspeakers</a></li> 
      <li><a href="#">Microphones </a></li> 
      <li><a href="#">DJ Equipment</a></li> 
      <li><a href="#">Sound Processing Equipment</a></li> 
     </ul> 
    </li> 

并修改了accordian.js代码，我添加了以$ .cookie开头的行和document.ready函数中的If语句。

jQuery.fn.initMenu = function() { 
return this.each(function(){ 
    var theMenu = $(this).get(0); 
    $('.acitem', this).hide(); 
    $('li.expand > .acitem', this).show(); 
    $('li.expand > .acitem', this).prev().addClass('active'), 
    currentID = ""; 
    $('li a', this).click(
     function(e) { 
      e.stopImmediatePropagation(); 
      var theElement = $(this).next(); 
      var parent = this.parentNode.parentNode; 
      if($(parent).hasClass('noaccordion')) { 
       if(theElement[0] === undefined) { 
        window.location.href = this.href; 
       } 
       $(theElement).slideToggle('normal', function() { 
        if ($(this).is(':visible')) { 
         $(this).prev().addClass('active'); 
         currentID = $(this).prev().attr('id'); 
         $.cookie('menustate', currentID, {expires: 2, path: '/'}); 
        } 
        else { 
         $(this).prev().removeClass('active'); 
         $.cookie('menustate', null, {expires: 2, path: '/'}); 
        }  
       }); 
       return false; 
      } 
      else { 
       if(theElement.hasClass('acitem') && theElement.is(':visible')) { 
        if($(parent).hasClass('collapsible')) { 
         $('.acitem:visible', parent).first().slideUp('normal', 
         function() { 
          $(this).prev().removeClass('active'); 
          $.cookie('menustate', null, {expires: 2, path: '/'}); 
         } 
        ); 
        return false; 
       } 
       return false; 
      } 
      if(theElement.hasClass('acitem') && !theElement.is(':visible')) {   
       $('.acitem:visible', parent).first().slideUp('normal', function() { 
        $(this).prev().removeClass('active'); 
        $.cookie('menustate', null, {expires: 2, path: '/'}); 
       }); 
       theElement.slideDown('normal', function() { 
        $(this).prev().addClass('active'); 
        currentID = $(this).prev().attr('id'); 
        $.cookie('menustate', currentID, {expires: 2, path: '/'}); 
        }); 
        return false; 
       } 
      } 
     } 
    ); 
}); 

}; 



$(document).ready(function() { 
$('.menu').initMenu();$('#side-navigation_frame').show(); 
if ($.cookie('menustate')) { 
    var anchor = "", 
     elementID = $.cookie('menustate'); 
    anchor = document.getElementById(elementID); 
    $(anchor).addClass('active'); 
    $(anchor).next().show(); 

} 
}); 

它工作很好，对初学者不坏，感谢所有的建议。

罗布·芬威克

Answer 2

Cookie在指定完整路径和域时保留“保留状态”。所以，如果你能让他们只为一页工作，你应该让他们在你网站的所有页面上自动工作。

Answer 3

尝试Web Storage。将页面卸载状态存储在页面上，恢复页面加载事件的状态。

Answer 4

你仍然可以使用cookies，你只需要确保它们不是特定于一个页面。例如：

document.cookie = 'openitem=5; expires=somedate; path=/'; 

将可供网站上的所有页面访问。 More about cookies.

Answer 5

好的，我看了一下你正在使用的库，它是一个体面的库，但你可能会发现如果你使用像jQuery UI这样更标准的库更容易找到你的问题的解决方案，它有一个手风琴控制http://jqueryui.com/demos/accordion/，就像我提到的那样，有很多人使用它，可以找到大多数问题的答案。

但就像我刚才提到的，我确实看了一下你的图书馆。正如其他人所提到的，您将使用cookie来存储该值。这个库支持'预扩展'手风琴的一个特定部分，这样做可以将扩展类添加到元素中。您可以执行该服务器端，也可以在调用initMenu（）之前使用JavaScript来完成此操作。

另一个较不优雅的选项是在调用initMenu后触发锚标签上的click事件。最后，你可以使用jQuery的show（）来展示没有动画的部分。

您需要做的第一件事是找出哪个部分被点击，然后您将该部分名称存储在cookie中。在页面加载时，您将获得该值并展开适当的相应部分。这是代码应该看起来像 - 注意这是伪代码，并且您已填写适当的部分。

$(function() { 
    $(".menu.collapsible .label").click(function() { 
     var accordianSection = $(this).text(); 
     rememberSection(accordianSection); 
    }); 

    var section = recallSection(); 
    if(section !== undefined) { 
     expandSection(section); 
    } 
}); 

的expandSection功能可以是这个样子：

var sectionLink = $(".menu.collapsible .label").filter(function() { 
    return $(this).text() == section; 
}); 
sectionLink.trigger('click');