Question

我将基于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之外的任何东西的案例。

Answer 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>

我写了这些修改，假设已经在你的整个项目中定义了$，如果没有，那么我会留给你工作。告诉我这是否有效。

Answer 2

我用于此的解决方案如下。

$(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数据。虽然不太可能有人以这种方式关闭手风琴然后刷新页面，但我认为最好彻底。

Bootstrap 4边栏菜单在页面重新加载时保持打开状态

2 个答案: