gpt4 book ai didi

javascript - JavaScript中如何使用localStorage防止页面加载时树状 View 的折叠

转载 作者:行者123 更新时间:2023-12-04 08:58:35 25 4
gpt4 key购买 nike

我想使用 localStorage 来防止在 JavaScript 中加载页面时树 View 的折叠。我试图通过以下方式做到这一点 - 但它没有成功。那么我该如何解决这个问题? ->

{{#each menu}}
<ul id="myUL">
<div class="menu-text">
<li>
<span class="caret treeparent ripple">Data<i class="fas fa-chevron-down arrow"></i></span>
<ul class="nested nav nav-pills flex-column tog">
{{#each this}}
<li rel="{{@index}}" class="nav-item">
<a href="/page">Data</a>
</li>
{{/each}}
</ul>
</li>
</div>
</ul>
{{/each}}
Javascript :
$("#myUL ul.tog li a").click( function() {
var value = $(this).parent("li").attr("rel");
$("#myUL ul.main li").removeClass("highlight");
$(this).parent("li").addClass("highlight");
localStorage.setItem('pms' , JSON.stringify(value));

console.log('Stored menu: ' + value);
});

var retrievedObject = JSON.parse(localStorage.getItem('pms'));
if(retrievedObject) {
$("#myUL ul.tog li[rel=" + retrievedObject + "] ul").slideToggle();
$("#myUL ul.tog li").removeClass("highlight");
$("#myUL ul.tog li").find("span.current-page").remove();
$("#myUL ul.tog li[rel=" + retrievedObject + "]").addClass("highlight").append("<span class=\"current-page\"></span>");

$("#myUL ul.tog li li").removeClass("highlight");
$("#myUL ul.tog li li").find("span.current-page").remove();
}
现场重现问题-->
https://jsfiddle.net/aw9thf3b/1/

最佳答案

<ul id="myUL">
<div class="menu-text">
<li>
<span class="caret treeparent ripple">Menu 1<i class="fas fa-chevron-down arrow"></i></span>
<ul class="nested nav nav-pills flex-column tog">
<li class="nav-item" data-rel="data-rel">
<a class="nav-link" href="javascript:window.location.reload(true)">Sub 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:window.location.reload(true">Sub 2</a>
</li>
</ul>
</li>
<li>
<span class="caret treeparent ripple">Menu 2<i class="fas fa-chevron-down arrow"></i></span>
<ul class="nested nav nav-pills flex-column tog">
<li class="nav-item">
<a class="nav-link" href="javascript:window.location.reload(true)">Sub 1</a>
</li>
</ul>
</li>
</div>
</ul>

var openedTreeLiIndex = JSON.parse(localStorage.getItem('openedTreeLiIndex')) || [];
restoreOpenedTreeIndex();
$(".treeparent").click(function () {
var $tog = $(this).next('.tog');
$tog.slideToggle();
if ($tog.hasClass('open')){
$tog.removeClass('open');
}else{
$tog.addClass('open');
}
$(".arrow", this).toggleClass('flip');
storeOpenTreeIndex();
});

function storeOpenTreeIndex() {
var liItems = $('.menu-text > li');
var counter = liItems.length;
$(liItems).each(function (index, li) {
var nestedUl = $(li).find('ul.open');
if (nestedUl.length > 0) {
if (openedTreeLiIndex.indexOf(index) === -1) {
openedTreeLiIndex.push(index);
}
} else {
openedTreeLiIndex = openedTreeLiIndex.filter(function (item) { return item !== index; });
}

if (!--counter){
localStorage.setItem('openedTreeLiIndex', JSON.stringify(openedTreeLiIndex));
}
});
}

function restoreOpenedTreeIndex() {
var liItems = $('.menu-text > li');
var counter = liItems.length;
$(liItems).each(function (index, li) {
if (openedTreeLiIndex.indexOf(index) !== -1) {
$(li).find('ul').addClass('open').css({ display: 'block' });
}
});
}
jsfiddle

关于javascript - JavaScript中如何使用localStorage防止页面加载时树状 View 的折叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63681330/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com