Jquery Accordion Menu - 导航到新页面时保持打开状态答案

【问题标题】：Jquery Accordion Menu - Stay open when navigating to a new pageJquery Accordion Menu - 导航到新页面时保持打开状态
【发布时间】：2014-09-14 19:10:50
【问题描述】：

我有一个使用 JQuery Accordion Menu 进行导航的 MVC 项目。我想知道是否有任何方法可以修改菜单，以便当我单击其中一个链接时，菜单在导航到下一页时保持打开状态

jQuery -

$(document).ready(function () {


    //ACCORDION BUTTON ACTION

    $('div.accordionButton').click(function () {

        //IF THE DIV YOU CLICKED IS ALREADY OPEN, CLOSE AND REMOVE THE OPEN CLASS

        if ($(this).next().hasClass('openDiv')) {

            $('div.accordionContent.openDiv').slideUp('normal');

            $('div.accordionContent.openDiv').removeClass('openDiv');

        }

            //CLOSE ANY OPEN DIVS, OPEN THE CLICKED DIV

        else {

            $('div.accordionContent.openDiv').slideUp('normal');

            $('div.accordionContent.openDiv').removeClass('openDiv');

            $(this).next().slideDown('normal');

            $(this).next().addClass('openDiv');

        }

    });

    //HIDE THE DIVS ON PAGE LOAD

    $("div.accordionContent").hide();

});

HTML -

@foreach (var sport in Model.SportTypesList)
    {
        <div id="wrapper">
            <div class="accordionButton">@sport.ToString()</div>
            <div class="accordionContent">
                @foreach (var coupon in Model.CurrentCoupons())
                {
                    if (coupon.SportID.ToString().Equals(sport.ToString()))
                    {
                        <div id="bullets">></div>
                        @Ajax.ActionLink(@coupon.CouponName, "Index", "Home", new { couponName = coupon.CouponName, sportName = coupon.SportID.ToString() }, new AjaxOptions
                        {
                            UpdateTargetId = "coupons",
                            InsertionMode = InsertionMode.Replace,
                            HttpMethod = "GET"
                        })
                        <br />
                    }
                }
            </div>
        </div>
    }

【问题讨论】：

您可以在这里查看各种有状态的解决方案。 1. 通过服务器 2. 通过 cookie 3 通过 localStorage。每个的实现都略有不同。使用 1，您必须设置要读取的类或 javascript 变量并在新页面加载时采取行动，使用 2 和 3，您必须查询 cookie/存储并在新页面加载时采取行动。

标签： javascript jquery html css model-view-controller

【解决方案1】：

您可以在会话中输入您选择的选项卡的 ID，然后从那里检查 ID 并保持打开选项卡。一种简单的解决方案。

【讨论】：