我将基于https://www.codeply.com/go/T2mpwMOt60的菜单集成到我正在构建的网站中。在构建过程中使用它有一个我觉得它错过的功能。 理想情况下,我希望在导航到另一个页面时保持打开一个菜单项。因此,查看示例菜单,这意味着如果项目3打开,它应该在页面重新加载时保持打开状态,但如果单击另一个菜单标题则关闭。 鉴于每个菜单部分都以
开头<a href="#menu1"
<a href="#menu2"
等,打开时,课程从
更改class="list-group-item collapsed"
到
class="list-group-item"
我认为当前菜单状态可以写入本地存储,然后在页面加载时读回来恢复以前的状态。
有没有人知道在编写此类功能时能指出正确方向的示例?
我刚刚尝试使用以下脚本保存到localStorage
$(document).ready(function () {
$('a').click(function() {
//store the id of the collapsible element
localStorage.setItem('collapseItem', $(this).attr('href'));
});
var collapseItem = localStorage.getItem('collapseItem');
if (collapseItem) {
$(collapseItem).collapse('show')
}
})
它没有重新打开菜单,但我怀疑这是由于什么被放入local.storage 例如,当我第一次点击打开“客户”子菜单时,它存储了#menu5,这是我想要在重新加载时重新打开的子菜单,但是当点击该菜单中的任何子项时,存储的数据将更改为上次点击链接的网址。
另外请注意,如果我在#menu1,#menu2等存储的同时重新加载页面,则会在菜单显示正确的情况下加载。所以这纯粹是一个确定如何不存储除初始#menu之外的任何东西的案例。
答案 0 :(得分:1)
问题在于您在事件处理程序中引用的对象。
$(document).ready(function () {
$('a').click(function() {
//store the id of the collapsible element
localStorage.setItem('collapseItem', $(this).attr('href'));
});
var collapseItem = localStorage.getItem('collapseItem');
if (collapseItem) {
$(collapseItem).collapse('show')
}
})
在第2行,它显示如果单击 a 标记,该函数将会触发。尝试使用其他内容,例如按钮,并将其用作打开菜单的链接,而不是使用与超链接相同的标记。如果你不能让它工作,那么可以尝试在每个菜单打开按钮上添加类似OnMouseDown属性的东西。
或者尝试我当前的解决方案,它会在保存之前检查其他属性。只要您在此处为每个菜单打开链接指定名称,
就可以使用
<script>
$(document).ready(function () {
$('a').click(function() {
if($(this).attr('name') == "menubtn"){
//store the id of the collapsible element
localStorage.setItem('collapseItem', $(this).attr('href'));
};
});
var collapseItem = localStorage.getItem('collapseItem');
if (collapseItem) {
$(collapseItem).collapse('show')
}
})
</script>
<a href="#menu1" name="menubtn">Test 1</a>
<a href="#menu2" name="menubtn">Test 2</a>
我写了这些修改,假设已经在你的整个项目中定义了$,如果没有,那么我会留给你工作。告诉我这是否有效。
答案 1 :(得分:1)
我用于此的解决方案如下。
$(document).ready(function () {
$('a').click(function() {
var menuNumber = $(this).attr('href').slice(0, -1);
//console.log(menuNumber);
if (menuNumber == '#menu') {
localStorage.setItem('collapseItem', $(this).attr('href'));
}
var menuHome = $(this).attr('href').slice(-9, -4);
//console.log(menuHome);
if (menuHome == 'index') {
localStorage.setItem('collapseItem', '');
}
});
var collapseItem = localStorage.getItem('collapseItem');
if (collapseItem) {
$(collapseItem).collapse('show')
}
// Clear local storage on menu close action
$('#sidebar .list-group > div').on('hide.bs.collapse', function () {
localStorage.setItem('collapseItem', '');
})
})
如果单击Home链接以防止菜单在最后使用的子菜单上重新打开,我还需要能够清除localStorage。 如果使用菜单上的箭头图标关闭它,还会添加检查以清除localStorage数据。 虽然不太可能有人以这种方式关闭手风琴然后刷新页面,但我认为最好彻底。