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

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，这是我希望在重新加载时重新打开的子菜单，但是当单击该菜单内的任何子菜单时，存储的数据将更改为最后点击链接的 url。

附加说明，如果我在存储#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标签，该函数就会触发。尝试使用诸如 button 之类的其他东西并将其用作打开菜单的链接，而不是使用与超链接相同的标签。如果你不能让它工作，那么可以尝试向每个菜单打开按钮添加类似 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', '');
})
})

如果单击主页链接以防止菜单在上次使用的子菜单上重新打开，我还需要能够清除 localStorage。 如果菜单上的箭头图标用于关闭它，还添加了一个检查以清除 localStorage 数据。 虽然不太可能有人会以这种方式关闭手风琴然后刷新页面，但我认为最好彻底。