时间戳

首页 > 解决方案 > 手风琴保存打开的卡并在回发后打开它

javascript - 手风琴保存打开的卡并在回发后打开它

问题描述

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

我正在使用带有 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>

标签： javascriptc#jqueryasp.netbootstrap-4

解决方案

感谢@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>

推荐阅读