手风琴保存打开的卡并在回发后打开它答案

【问题标题】：Accordion save opened card and open it after postback手风琴保存打开的卡并在回发后打开它
【发布时间】：2020-04-25 20:00:45
【问题描述】：

好吧，经过一整天的努力，寻找人们如何做到这一点的例子，我无法让它进入工作状态......

我正在使用带有 Bootstrap 4.4 Accordion 的 ASP.NET (C#)，它工作正常（点击卡片标题时显示 div）。

但我无法开始工作显示卡的持久状态。当用户进入页面时，我默认显示第一张卡片的内容。但是当他通过卡片、某些复选框或某些导致回发的东西时，就会加载默认状态。

我试图在点击时保存卡头 ID，如果卡体导致回发，则检索隐藏字段的值，并显示最后打开的卡。

非常感谢任何帮助，因为我对 javascript/jquery 不太熟悉。

谢谢。

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<script src="/Scripts/jquery-3.4.1.js"></script>

<asp:HiddenField ID="hfAccordionIndex" runat="server" />

<div class="container">
    <div class="accordion" id="accordionSetup">
        <h2 class="mb-3">Accordion</h2>
        <div class="card shadow mb-2">
            <div class="card-header" id="headingOne" style="transform: rotate(0);">
                <a class="collapsed card-title text-dark stretched-link" id="linkOne" role="button" data-toggle="collapse" aria-expanded="true" aria-controls="collapseOne" data-target="#collapseOne" href="#collapseOne">
                 First Link
                </a>
            </div>
            <div id="collapseOne" class="collapse show" data-parent="#accordionSetup">
                <div class="card-body">
                    Something in body
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow mb-2">
        <div class="card-header" id="headingTwo" style="transform: rotate(0);">
            <a class="collapsed card-title text-dark stretched-link" id="linkTwo" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseTwo" data-target="#collapseTwo" href="#collapseTwo">
             Second link
            </a>
        </div>
        <div id="collapseTwo" class="collapse" data-parent="#accordionSetup">
            <div class="card-body">
                Something in body
            </div>
        </div>
    </div>


    <div class="card shadow mb-2">
        <div class="card-header" id="headingThree" style="transform: rotate(0);">
            <a class="collapsed card-title text-dark stretched-link" id="linkThree" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseThree" data-target="#collapseThree" href="#collapseThree">
              Third link
            </a>
        </div>
        <div id="collapseThree" class="collapse" data-parent="#accordionSetup">
            <div class="card-body">
                Something in body
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    $(document).ready(function () {
        var last = $("#input[id=hfAccordionIndex]").val();

        if (last != null) {
            $(last).find('.collapse').addClass('show');
        }

        $("#linkOne").click(function () {
            $("#input[id=hfAccordionIndex]").val("headingOne");
        });
        $("#linkTwo").click(function () {
            $("#input[id=hfAccordionIndex]").val("headingTwo");
        });
        $("#linkThree").click(function () {
            $("#input[id=hfAccordionIndex]").val("headingThree");
        });
    });

</script>

【问题讨论】：

在本地存储中回发检查值并在Accordion中设置后，您需要将当前Accordion值存储在本地存储中。

标签： javascript c# jquery asp.net bootstrap-4

【解决方案1】：

感谢@jishan-siddique

终于可以正常工作了，我决定使用 sessionStorage，而不是 localStorage，但它可以正常工作！

谢谢！

<script type="text/javascript">
    $(document).ready(function () {
        var last = sessionStorage.getItem('accordion');

        if (last != null) {
            $('#collapseOne').removeClass('show');
            $('#' + last).addClass('show');
        }
    });
    $("#linkOne").click(function () {
        sessionStorage.setItem('accordion', "collapseOne");
    });
    $("#linkTwo").click(function () {
        sessionStorage.setItem('accordion', "collapseTwo");
    });
    $("#linkThree").click(function () {
        sessionStorage.setItem('accordion', "collapseThree");
    });
</script>

【讨论】：