Javascript 重新加载或回发后保持手风琴打开

我一直在看一些例子，但似乎没有任何效果。现在我有一个按钮组，每个按钮作为一个单独的类别。单击按钮后，它将显示一个手风琴，手风琴内将显示表单。出于测试目的，我现在只有一个表单

我遇到的问题是，一旦我单击submit按钮，页面将完全重新加载，一旦页面返回，所有内容都将关闭。我尝试过使用updatePanel，但运气不佳

基本上，我希望在重新加载之前打开的重新加载之后，所有内容都保持打开状态

 <asp:ScriptManager id="script1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel id="panel1" runat="server">


 <div class="btn-group-vertical" style="width:100%; ">

@* Bucket Group 1 *@




<div class="btn-group">
    <button type="button" class="btn btn-primary" id="formButton1" style="background-color:#EEEEEE; border-color:darkgrey; color:black;"><p>Bucket </p>  <text style="font-size:80%;"> Bucket1</text></button>

    @* Overall form for Monitoring *@
    <form asp-controller="test" method="post" role="form" onsubmit="return confirm('Do you really want to carry out this action?');" id="form1" style="display:none;">
        <div id="accordion" role="tablist" aria-multiselectable="true">

            @* Form 1 *@



            <div class="card">
                <div class="card-header" role="tab" id="headingTwo">
                    <h5 class="mb-0">
                        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="font-size:15px;">
                            Test1
                        </a>
                    </h5>
                </div>
                <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
                    <div class="card-block">
                        <div class="form-group">
                            <div class="form-group">

                                <p> This script will return a value.</p>
                            </div>

                            @Html.DropDownList("Envs", new SelectList(Enum.GetValues(typeof(Envs))), "Select Enivronment", new { @class = "form-control" })


                            <br>
                            <div>
                                <button type="submit">Submit</button>
                                &nbsp;
                            </div>
                            <br />

                            @* Space to display output *@

                            <h5>Output: </h5>
                            <div>
                                <textarea cols="20" rows="2" class="form-control" style="color:cadetblue;font-weight:bold;">  @ViewBag.serviceResponse   </textarea>
                            </div>
                        </div>

                        &nbsp;
                    </div>
                </div>
            </div>


            @* Form 2 *@


        </div>
    </form>
</div>


@* Bucket Group 2 *@

<div class="btn-group">
    <button type="button" class="btn btn-primary" id="formButton2" style="background-color:#EEEEEE; border-color:darkgrey; color:black;"><p>Test2</p> <text style="font-size:80%">Test 2</text></button>
    <form id="form2" method="post" style="display:none;">
        <div id="accordion" role="tablist" aria-multiselectable="true">

            <div class="card" id="get">
                <div class="card-header" role="tab" id="heading">
                    <h5 class="mb-0">

                        <p> Test2.</p>

                    </h5>
                </div>

            </div>
        </div>
    </form>

</div>

    </div>





 </asp:UpdatePanel>

您有两个选择：

• 不重新加载页面（添加单击处理程序以提交表单数据，而不使用内置的HTML提交）
• 使用本地存储来存储accordion节打开的状态，并使用相同的节打开初始化页面

---

将其存储在本地存储。@DanielA.White我在线查看了一些示例，说实话，我对如何将其存储在本地存储有点困惑基本上，您必须保持状态，然后恢复它。没有任何内在的东西能为你做到这一点；你得靠自己。正如其他人所说，您可以使用类似localStorage的东西来持久化状态。您可能还想看看历史API。localStorage实际上只是一个字典。就这么简单。

$("#formButton1").click(function () {
    $("#form1").toggle();

});


// Write your JavaScript code.
// Write your Javascript code.
$("#formButton2").click(function () {
    $("#form2").toggle();

});