单击图像链接时，Javascript sessionStorage 使最后选择的项目成为第一个项目

Question

我有这个 JS 代码，当页面更改时，它会扩展我菜单上最后打开的项目，如果单击页面顶部的图像以转到主页，我如何在页面上创建“主页”链接菜单是最后一个事件的点击链接？

<script>
$(document).ready(function(){
    //Loop through nav items, compare to expanded item ID from sessionStorage so we can expand whichever item was previously expanded
    if(sessionStorage.getItem("activeMenuItemID") != undefined){
        $("#nav > li > a").each(function(){
            if ($(this).attr("id") == sessionStorage.getItem("activeMenuItemID")){
                expandMenuItem(this);
            }
        });
    }

    $('#nav > li > a').click(function(elem){
        expandMenuItem(this);
    });

});

function expandMenuItem(elem){
    if ($(elem).attr('class') != 'active'){
        $('#nav li ul').slideUp();
        $('#nav > li > a').removeClass("active");
        $(elem).addClass("active");
        $(elem).next().slideToggle();
        sessionStorage.setItem("activeMenuItemID", $(elem).attr("id"));
    }
}
</script>

顶部的图像根本不是菜单的一部分

Answer 1

看看这个 fiddler Here

好的，这里有一些你遗漏的东西，我已经在你的代码中修复了，只是想让你知道。

expandMenuItem 在全局范围内是否有原因？这可能很糟糕，因为现在没有其他人可以声明一个名为 expandMenuItem 的函数？也许超出您的项目范围只是需要考虑的事情。

尽量不要在 js 中使用 ==，因为它的含义可能与您想象的不同，使用 === 更安全。jquery 有一个 hasClass 函数，它会检查一个元素是否有一个类。 $(elem).attr('class') != 'active' 很糟糕，因为如果它有两个类，你就是 SOL。

当在同一个函数中请求同一个元素时，尝试将它保存到一个变量中。我注意到 $(elem) 被击中了几次。这可能会导致问题，因为您一直在向文档询问元素，只需将其保存在一个变量中，这样您就不必一直打扰文档。您的选择器 #nav > li > a 也不正确。您可能想查看 > 为选择器做了什么我也切换了它。

希望对您有所帮助。