Question

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

这是jquery

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

这是html。

  <div id="MasterPage_Menu" class="menu_list">
  <p class="header">Header-1</p>
    <div class="menu_body">
        <a href="page1.aspx">Link-1</a>
    </div>
  <p class="header">Header-2</p>
    <div class="menu_body">
        <a href="page2.aspx">Link-2</a>
    </div>
  <p class="header">Header-3</p>
    <div class="menu_body">
        <a href="page3.aspx">Link-3</a>
   </div>
  </div>

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

示例问题：例如：2 menu_body可见，当我点击href =“page1.aspx”时，页面将导航到page2.aspx但是手风琴将返回默认值所有的menu_body都被隐藏了。

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

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

对此有何解决方案？

Answer 1

如果您在标题中添加id属性：

<p class="header" id="header-1">Header-1</p>
    <div class="menu_body">
        <a href="page1.aspx">Link-1</a>
    </div>

然后，您可以在处理程序中提取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值。

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

1 个答案: