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

【问题标题】：Keep accordion open after reload or postback重新加载或回发后保持手风琴打开
【发布时间】：2019-01-14 21:54:26
【问题描述】：

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

我遇到的问题是，一旦我单击提交按钮，页面就会完全重新加载，一旦返回页面，一切都会关闭。我已经尝试使用 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>

点击按钮时打开的Javascript函数。

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

});


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

});

【问题讨论】：

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

标签： javascript twitter-bootstrap asp.net-core

【解决方案1】：

你有两个选择：

不要重新加载页面（添加点击处理程序来提交表单数据，而不使用内置的 HTML 提交）
使用本地存储来存储打开手风琴部分的状态，并在打开相同部分的情况下初始化页面

【讨论】：