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

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');
     }
  });
});

什么是使子菜单在页面更改时保持打开的最佳方法 - 可能使用cookies或会话？

我已经在这里创建了一个jsfiddle，以便您可以查看完整的html和css等：http://jsfiddle.net/bMkEj/

- user2431709

Answer 1

可以使用HTML5本地存储来完成。

在点击处理程序中，将活动菜单文本保存到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();
    }
});

- MrCode

---

当然，Internet Explorer 8以下版本不支持此功能。请参考http://caniuse.com/#feat=namevalue-storage。 - Eonasdan

如果我们只使用IE<8支持的技术，那么网络世界将会变得非常乏味和无聊。 - MrCode

相信我，我不关心支持IE 6和7。我只是想向那些必须关心的人指出这一点。 - Eonasdan

@MrCode 我想知道在Windows95上创建和执行桌面JavaScript应用程序会是什么样子... - Jeff Noel

@Ghillied 它可能看起来像这样http://www.omnicognic.com/Support/34/Fatal_Error_Win98.png。 - MrCode

@CharlieFord 它是否将任何内容存储到本地存储中？通过打开 Chrome Dev 工具（F12），然后选择资源选项卡 > 本地存储 > 选择域名/站点来检查。 - MrCode

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();
});

- ponysmith

Answer 3

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

编辑：如果您只是运行JS，则可以解析URL（window.location.href）并使用它来设置活动类。

- user925885

---

好的 - 我不太擅长JS。你有一个我可以看到的例子吗？ - user2431709

这取决于你的URL是什么样子。如果你的URL是 /foo/bar 类型，那么可以使用 var str = window.location.href.substr(window.location.href.lastIndexOf('/') + 1); 来获取URL中最后一个斜杠之后的部分，然后使用 switch(str)（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch）来添加所需元素的类。 - user925885

@CharlieFord 在这里有一个很好的例子。玩得开心 :) - Jeff Noel