Question

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

我遇到的问题是，单击提交按钮后，页面将完全重新加载，一旦返回页面，所有内容将关闭。我尝试使用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();

});

Answer 1

您有两个选择：

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

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

1 个答案: