Javascript 在页面加载时打开特定的嵌套UL元素

这是我的建议

我创建了一个非常简单的“归档树”，它使用嵌套的ULs和LIs浏览年份、月份和日期。目前，我有一个问题需要解决：

如果你点击任何一个指向另一个页面的每日链接，我希望整个事情一直持续到那个月。（例如，就像navbar元素有一个“active”类一样，只有在这种情况下，UL元素才会在该月份的新页面上显示为块，就好像它以前被打开过一样。我尝试添加一个单独的类来显示为块，但它没有改变（参见JSFiddle）

.month活动{
显示：块；
}

按键5

按键53

您可以为每个链接添加一个

data

属性，然后设置一个

localStorage

项，其中包含上次单击的链接的值。在页面加载时，如果设置了

localStorage

项，则显示该元素并遍历备份DOM并显示父项

因为这在沙箱中不起作用，所以，这里有一把小提琴

if（localStorage.lastClicked）{
$（'[data id=“'+localStorage.lastClicked+'“]'））.parentsUntil（'.parent'）。每个（函数（）{
$（this.sides（）.addBack（）.slideDown（）；
});
}
$（“.年按钮，.月按钮”）。单击（函数（e）{
e、 停止传播（）；
$（this.children（'ul'）.slideToggle（）；
var clicked=e.target.getAttribute（'data-id'）；
如果（单击）{
localStorage.lastClicked=已单击；
}
})；

.navbutton{
-webkit外观：无；
背景色：#cfa9db；
边界：无；
颜色：白色；
填充：9px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
宽度：100%；
字体大小：粗体；
过渡：所有0.2秒到0秒；
}
navbuttoninner先生{
-webkit外观：无；
背景色：#cfa9db；
边界：无；
颜色：白色；
填充：9px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
宽度：290px；
字体大小：粗体；
过渡：所有0.2秒到0秒；
}
.每年{
字体大小：大号；
字体大小：粗体；
光标：指针；
列表样式：无；
}
.每月存档{
列表样式：无；
字体大小：正常；
光标：指针；
}
.archive_dayList{
左边距：32px；
列表样式：无；
字体大小：正常；
光标：指针；
}
.月份按钮{
填充顶部：6px；
}
.存档日{
填充顶部：6px；
}
.每月，
.archive_dayList{
显示：无
}

2017


六月








七月

谢谢！这正是我想要的！@zsophianoris不客气：）顺便说一句，如果这解决了问题，你应该选择它作为解决方案。你也应该在你的另一个问题（你去年问的）中选择一个答案，因为看起来你得到了你在那里寻找的答案。@zSophianoris你点击答案旁边的小复选标记来选择问题的最佳解决方案。

.month-active {
    display: block;
}

<ul class="archive_year">
    <li class="year-button"><button class="navbutton">key5</button>
        <ul class="archive_month">
            <li class="month-button"><button class="navbuttoninner">key53</button>
                <ul class="archive_dayList month-active">
                    <li class="archive_day"><a href="#">Test link</a></li>
                    <li class="archive_day"><a href="#">Test link</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>