Bootstrap 手风琴在 Post 后关闭

Question

我在使用 Bootstrap Accordion ASP.net 网络表单时遇到问题。回发后无法保持打开状态。

我想要的行为是在 Accordian 关闭的情况下打开页面。然后，当单击按钮 cmdActivityTS 时，我希望打开 Accordian。当 Accordian 中的内容被回发时（此处由 Button1），我希望 Accordian 保持打开状态以便我可以在其中显示一些数据。我希望 Accordian 在单击 cmdActivityTS 时再次关闭。

我几乎可以通过声明性地将 .show 添加到 div collapseOne 来做到这一点。但是，手风琴会在页面打开时打开。但是，在那之后，它在回发后保持打开状态。因此，我一直试图通过在脚本中添加和删除类来获得相同的结果。没有运气。

这是我的代码。谢谢你的帮助。我已经研究了一段时间了。

'''

 head runat="server">
    <title>Test page</title>
       <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>  
        <link rel="stylesheet" href="/Vendor/Admin.css" />
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"/>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>


<script type="text/javascript">   
    $(document).ready(function () {
        $('#cmdActivityTS').click(function () {

            var state = $('#hiddenfield').val();

            if (state == 'collapse'){
                $('#hiddenfield').val('show')
                $('#collapseOne').addClass('show')                
            }
            else {
                $('#hiddenfield').val('collapse')
                $('.collapseOne').removeClass('show')                
            }

            var state = $("#hiddenfield").val();
        });       
    });
</script>

</head>

<body>
<form id="form1" runat="server">

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

  <div class="accordion" >

  <div class="card mb-3">
    <div class="card-header" id="headingOne" style="background-color:white;"">
      <div class="mb-0">
        <button type="button" id="cmdActivityTS" runat="server" class="btn btn-link collapsed " data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          <h5 style="color:steelblue">Show Data From Server</h5>
        </button>
      </div>
    </div>
    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion" enableviewstate="true">
      <div class="card-body">          
          <div>
              Aliquam dictum viverra dui ac euismod. 
              <div>
              <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click"/>
              </div>
          </div>        
      </div>
    </div>  <!-- collapseOne -->
  </div>    <!-- Card -->

  </div>    <!-- Accordian -->

'''

Answer 1

我的问题没有得到任何答案，所以我想出了一个解决方法。我用 asp.net 面板来伪造手风琴。它不像手风琴那样有平滑的过渡，但其他一切都很好。

  <div class="pb-3">         
   <div class="pt-4 pl-4 border border-bottom-0 rounded" style="background-color:white; height:70px; width:100%; color:dodgerblue">
        <asp:LinkButton ID="OpenTS" onclick="openTs_Click" ForeColor="SteelBlue" runat="server"><h5>Recent Timesheet Activity</h5></asp:LinkButton>
   </div>     
    <asp:Panel ID="tsPanel" runat="server">
        <div class="card border-top-0">
            <div class="card-body">
                <p><uc1:WeekAtAGlance ID="tsActivity" runat="server" /></p>
            </div>
         </div>
    </asp:Panel>
</div>

<div class="pb-3">
    <div class="pt-4 pl-4 border border-bottom-0 rounded" style="background-color:white; height:70px; width:100%; color:steelblue">
        <asp:LinkButton ID="OpenFin" onclick="openFin_Click" ForeColor="SteelBlue" runat="server"><h5>Recent Financial Activity</h5></asp:LinkButton>
    </div>
    <asp:Panel ID="finPanel" runat="server">
        <div class="card  border-top-0"">
            <div class="card-body">
                <p><uc1:WeekAtAGlance ID="finActivity" runat="server" /></p>
            </div>
        </div>
    </asp:Panel>
</div>

Protected Sub openFin_Click(sender As Object, e As EventArgs) Handles OpenFin.Click
    If finPanel.Visible = True Then
        finPanel.Visible = False
    Else
        finPanel.Visible = True
    End If

End Sub

Protected Sub openTs_Click(sender As Object, e As EventArgs) Handles OpenTS.Click
    If tsPanel.Visible = True Then
        tsPanel.Visible = False
    Else
        tsPanel.Visible = True
    End If
End Sub

Bootstrap 手风琴在 Post 后关闭

Bootstrap Accordion Closes on Post back

jquery

asp.net

bootstrap-4

bootstrap-accordion