JQuery，重新加载页面时切换/手风琴菜单问题答案

【问题标题】：JQuery, toggle/accordion menu issues when reloading pageJQuery，重新加载页面时切换/手风琴菜单问题
【发布时间】：2017-05-22 20:33:48
【问题描述】：

这是我的代码...

var menuToggle = false;

$(document).ready(function () {
// Init Tabs
$("#ipsg-tabs").tabs();

// Init Tooltips
$(function () {
    $('.ipsg-tab').tooltip();
});;

// Init Menu 
accordionMenu();

// Toggle Menu
$('.ipsg-logo-menu-btn').click(function () {
    if (!menuToggle) {
        menuToggle = true;
        $('.sg-accordion > .ipsg-nav-items').hide();
        $('.sg-accordion h3').removeClass('state-selected');
        $('.ipsg-container').addClass('ipsg-menu-collapse');
    } else {
        menuToggle = false;
        $('.ipsg-container').removeClass('ipsg-menu-collapse');
    }
});

});

function accordionMenu() {
var allPanels = $('.sg-accordion > .ipsg-nav-items');    
var menuLeaving = false;
$('.sg-accordion > h3 > a').click(function () {
    if (!menuToggle) {
        if (!$(this).parent().hasClass('state-selected')) {
            allPanels.slideUp('fast');
            $('.sg-accordion h3').removeClass('state-selected');

            $(this).parent().next().slideDown('fast');
            $(this).parent().addClass('state-selected');
        } else {
            allPanels.slideUp('fast');
            $('.sg-accordion h3').removeClass('state-selected');
        }
    }

    return false;
});

$('.sg-accordion > h3 > a').mouseenter(function () {
    if (menuToggle) {
        menuLeaving = false;
        $('.sg-accordion > .ipsg-nav-items').hide();
        $('.sg-accordion h3').removeClass('state-selected');
        $(this).parent().next().show();
        $(this).parent().addClass('state-selected');
    }
});

$('.sg-accordion > .ipsg-nav-items').mouseenter(function () {
    if (menuToggle) {
        menuLeaving = false;
    }
});

$('.sg-accordion > h3 > a').mouseleave(function () {
    if (menuToggle) {
        menuLeaving = true;

        setTimeout(function () {
            if (menuLeaving) {
                $('.sg-accordion > .ipsg-nav-items').hide();
                $('.sg-accordion h3').removeClass('state-selected');
            }
        }, 400);
    }
});

$('.sg-accordion > .ipsg-nav-items').mouseleave(function () {
    if (menuToggle) {
        menuLeaving = true;

        setTimeout(function () {
            if (menuLeaving) {
                $('.sg-accordion > .ipsg-nav-items').hide();
                $('.sg-accordion h3').removeClass('state-selected');
            }
        }, 400);
    }
});
}

我正在尝试根据页面重新加载来关闭或打开我的切换菜单。因此，如果我使用汉堡菜单并单击链接，我希望汉堡菜单在重新加载后保留。与打开菜单一样，我想要它，所以如果我点击这些链接，菜单在重新加载时保持打开状态。

有人有什么想法吗？

【问题讨论】：

有什么方法可以使用后端语言来处理这个问题？ javascript/jQuery 通常会导致在更改之前打开或关闭菜单的“闪烁”时刻。使用后端语言，您可以传递已打开菜单的代码。
我在后端使用.net .. 我不知道该怎么做：/
不幸的是，我在.net的经验总和是一次实习，所以我不知道你会怎么做，但听起来你可以使用__doPostBack发送数据（大概从菜单项上的单击事件）到后端，您可以将其存储在用户的会话或闪存数据中，并稍后引用它以将活动类添加到菜单或菜单项。该类将简单地模仿您的框架用于打开菜单的内容。
显然，下面的答案是关于如何使用 javascript 完成此任务的，而且走这条路可能会更容易，但如果您想要后端方法，这听起来是可行的。
我应该在哪里添加下面链接中的代码？

标签： javascript jquery

【解决方案1】：

这是我会使用 localStorage 或 cookie 的类型。您可以设置一个变量，让您可以决定是打开还是关闭菜单。

【讨论】：

【解决方案2】：

以前问过。您可以为此使用 cookie，因为它易于实施和维护。
链接在这里Jquery UI Accordion menu saving menu state even after refresh

【讨论】：

能否提供您的 HTML 代码，以便我添加一些代码？
代码只是在 div 中调用 ipsg-logo-menu-btn 类...
menu 是一个带有链接的下拉菜单。但是当我们单击汉堡菜单时，下拉菜单会切换到侧面图标导航 ..