我有一个侧边栏的代码(类似于WordPress)。
我有多个父类<li class="panel parent">
。其中一个父项具有Notes Received和Notes Sent的子容器。目前,当我点击孩子正在工作的父母时,如果我选择其他父母,孩子也会关闭。
我在jQuery中使用addClass
来选择父级和子级。
问题
当我重新加载页面时,addClass
从父级中消失了。我相信你可以使用localStorage
但我不知道如何使用它。
<div id="sidebar-wrapper">
<div id="sidebar">
<ul id="accordion" class="sidebar-menu grandparent">
<li class="panel parent">
<a data-toggle="collapse" data-parent="#accordion" data-target="#notes" href="#"> Vegetables </a>
<div id="notes" class="panel-collapse collapse">
<!-- children -->
<ul class="children">
<li><a href="#"> Potato </a></li>
<li><a href="#"> Tomato </a></li>
...
</ul>
</div>
</li>
<li class="panel parent">
<a data-toggle="collapse" data-parent="#accordion" data-target="#dummychild" href="#">Fruits</a>
<div id="dummychild" class="panel-collapse collapse"></div> <!-- dummy child -->
</li>
<li class="panel parent">
<a data-toggle="collapse" data-parent="#accordion" data-target="#dummychild" href="#">Spices</a>
<div id="dummychild" class="panel-collapse collapse"></div> <!-- dummy child -->
</li>
...
</ul>
</div
</div>
这是我的jQuery
$(document).ready(function () {
$('.grandparent').find('li a').click(function () {
$('.grandparent').find('li a').removeClass('sidebar-hght');
$(this).addClass('sidebar-hght');
$($(this).closest('li.parent').children()[0]).addClass('sidebar-hght');
});
});
感谢。
答案 0 :(得分:0)
OLD ANSWER
你应该执行此
window.localStorage.setItem('OPEN', 'YES');
或者
window.localStorage.setItem('OPEN', 'YES');
取决于您是要显示还是关闭侧边菜单。 然后你的jQuery应该变得像这样
$(document).ready(function () {
$('.grandparent').find('li a').click(function () {
$('.grandparent').find('li a').removeClass('sidebar-hght');
$(this).addClass('sidebar-hght');
$($(this).closest('li.parent').children()[0]).addClass('sidebar-hght');
});
if( window.localStorage.getItem('OPEN') ==='YES' ) {
/* put here your code to add the class "addClass" to the parents you want */
}
});
编辑:基于JSFIDDLE的新答案
这个javascript代码会做神奇的
$(document).ready(function () {
$('.grandparent').find('li a').click(function () {
$('.grandparent').find('li a').removeClass('sidebar-hght');
$(this).addClass('sidebar-hght');
window.localStorage.setItem('OPEN', $(this).html());
alert("set OPEN to "+$(this).html());
$($(this).closest('li.parent').children()[0]).addClass('sidebar-hght');
});
if( window.localStorage.getItem('OPEN') ) {
$('.grandparent').find('li a').each(function( index ) {
if($(this).html() === window.localStorage.getItem('OPEN'))
$(this).click();
});
}
});