页面更改时如何保持子菜单打开

Question

我的菜单有这个 JS 代码：

$(document).ready(function () {
  $('#nav > li > a').click(function(e){
     if ($(this).attr('class') != 'active'){
       $('#nav li ul').slideUp();
       $(this).next().slideToggle();
       $('#nav li a').removeClass('active');
       $(this).addClass('active');
     }
  });
});

当页面更改时，使子菜单保持打开状态的最佳方法是什么？可能使用 cookie 或会话？

我在这里创建了一个 jsfiddle，所以你可以看到完整的 html 和 css 等：http://jsfiddle.net/bMkEj/

Answer 1

可以使用HTML5 LocalStorage来完成。

在点击处理程序中，将活动菜单文本保存到 localStorage：

$('#nav > li > a').click(function(e){
   ...
   localStorage.setItem("activeSubMenu", $(this).text());
});

在页面加载时，阅读 localStorage 并展开菜单（如果找到）：

$(document).ready(function(){
    var activeItem = localStorage.getItem("activeSubMenu");
    if(activeItem){
        $('#nav > li > a').filter(function() {
            return $(this).text() == activeItem;
        }).slideToggle();
    }
});

Answer 2

在加载页面时传递一个查询参数并使用它来选择适当的导航项：

HTML

<ul>
    <li id="foo"><a href="index.html?nav=foo">Foo</a>
        <ul>
            <li>Foo 1</li>
            <li>Foo 2</li>
        </ul>
    </li>
    <li id="bar"><a href="index.html?nav=bar">Bar</a>
        <ul>
            <li>Bar 1</li>
            <li>Bar 2</li>
        </ul>
    </li>
    <li id="baz"><a href="index.html?nav=baz">Baz</a>
        <ul>
            <li>Baz 1</li>
            <li>Baz 2</li>
        </ul>
    </li>
</ul>

JS（假设为 jQuery）

$(document).ready(function() {
    var query = decodeURIComponent(window.location.search);
    var matches = query.match(/nav=([^&]*)/);
    var id = matches[1];
    $('#' + id + ' ul').slideDown();
});

Answer 3

如果您正在运行 PHP 或任何其他服务器端语言，您可以将活动类添加到活动元素。

编辑：如果您只是在运行 JS，您也许可以解析 url (window.location.href) 并使用它来设置活动类。