这是JSFiddle
我创建了一个非常简单的“归档树”,它使用嵌套的UL和LI来浏览数年,数月和数天。目前,我有一个问题需要解决:
如果您点击指向另一个页面的任何一天链接,我希望整个过程保持开放至该月。 (例如,对于导航栏元素具有“活动”类,仅在这种情况下,UL元素将在该页面的新页面上显示为块,就像之前已打开过一样。我尝试添加一个将类显示为块,但它不会改变(参见JSFiddle)。
{{1}}
答案 0 :(得分:1)
您可以为每个链接添加data
属性,然后设置localStorage
项目,其中包含最后一个链接的值。在页面加载时,如果设置了localStorage
项,则显示该元素并遍历DOM并显示父项。
由于这不会在SO的沙箱中工作,所以这是一个小提琴。 https://jsfiddle.net/pppL1rwx/4/
if (localStorage.lastClicked) {
$('[data-id="' + localStorage.lastClicked + '"]').parentsUntil('.parent').each(function() {
$(this).siblings().addBack().slideDown();
});
}
$('.year-button, .month-button').click(function(e) {
e.stopPropagation();
$(this).children('ul').slideToggle();
var clicked = e.target.getAttribute('data-id');
if (clicked) {
localStorage.lastClicked = clicked;
}
});

.navbutton {
-webkit-appearance: none;
background-color: #cfa9db;
border: none;
color: white;
padding: 9px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
width: 100%;
font-weight: bold;
transition: all 0.2s ease 0s;
}
.navbuttoninner {
-webkit-appearance: none;
background-color: #cfa9db;
border: none;
color: white;
padding: 9px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
width: 290px;
font-weight: bold;
transition: all 0.2s ease 0s;
}
.archive_year {
font-size: large;
font-weight: bold;
cursor: pointer;
list-style: none;
}
.archive_month {
list-style: none;
font-weight: normal;
cursor: pointer;
}
.archive_dayList {
margin-left: 32px;
list-style: none;
font-weight: normal;
cursor: pointer;
}
.month-button {
padding-top: 6px;
}
.archive_day {
padding-top: 6px;
}
.archive_month,
.archive_dayList {
display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<ul class="archive_year">
<li class="year-button">
<button class="navbutton">2017</button>
<ul class="archive_month">
<li class="month-button">
<button class="navbuttoninner">June</button>
<ul class="archive_dayList">
<li class="archive_day"><a href="#" data-id="link1">Test link</a></li>
<li class="archive_day"><a href="#" data-id="link2">Test link</a></li>
</ul>
</li>
</ul>
<ul class="archive_month">
<li class="month-button">
<button class="navbuttoninner">July</button>
<ul class="archive_dayList">
<li class="archive_day"><a href="#" data-id="link3">Test link</a></li>
<li class="archive_day"><a href="#" data-id="link4">Test link</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
&#13;