如何在页面导航后跟踪手风琴（在母版页中）打开状态？

我正在使用jquery手风琴作为asp.net主页中的菜单。

这是jquery

$(document).ready(function() { $(".header").click(function() { $(this).toggleClass("display"); $(this).next("div .menu_body").slideToggle(500); }); }); 

这是HTML。

  
 
Header-1
 
 Link-1 
 
Header-2
 
 Link-2 
 
Header-3
 
 Link-3 
  

根据上面的代码，当单击标题时，内容（menu_body）将滑动切换。 menu_body默认隐藏，当用户单击标题时，menu_body可见。

示例问题：例如：2 menu_body可见，当我点击href =“https://stackoverflow.com/questions/6039343/how-to-keep-track-of-accordionin-masterpage-open-status-after-page-navigation/page1.aspx”时，页面将被导航到https://stackoverflow.com/questions/6039343/how-to-keep-track-of-accordionin-masterpage-open-status-after-page-navigation/page2.aspx但是手风琴将返回默认值，其中所有menu_body都被隐藏。

由于我在母版页中使用此手风琴，因此无法存储值以在页面导航时将手风琴menu_body状态跟踪到隐藏字段中。 隐藏字段中的值将被重置。

我想将此存储在会话中，但在客户端页面中，它不允许我们将值存储到会话中。

对此有何解决方案？

Answer 1

如果您向标头添加id属性：

 
Header-1
 
 Link-1  

然后你可以在你的处理程序中拉出id并使用jquery.cookie跟踪cookie中的打开面板：

 $(".header").click(function() { var $this = $(this); if(!$this.hasClass('display')) $.cookie('open_panel', this.id); $this.toggleClass("display"); $this.next("div .menu_body").slideToggle(500); }); 

如果你想一次打开多个面板，你需要稍微使用open_panel的存储格式，但是简单的CSV列表可能就足够了; 我将把这部分作为练习留给读者。 您还需要在页面加载时检查cookie并打开相应的面板。

如果您希望将设置保留为用户帐户首选项的一部分，您还可以跟踪服务器上cookie的值。