javascript - 如何在回发时保持 SlideToggle 的状态？

Question

我想要 jQuery slideToggle() 坚持它的状态。默认情况下，页面加载时会折叠。对于<div>应用了 SlideToggle() 的有 asp:按钮，单击时会执行一些操作，但可能会发生页面回发。

如果页面刷新则<div>的初始状态如果用户之前单击过slideToggle()，则应该可见。同样，如果用户折叠 <div>再次，当页面刷新(F5 或回发)时，<div>最初应该再次折叠。

所以基本上我想知道如何在回发时保持slideToggle()的状态？这是代码:

<script type="text/javascript">
    $(document).ready(function() {
        $(".flip").click(function() {
            $(".panel").slideToggle("slow");
        });
    });
</script>

<div>
    <div class="panel">
        <table>
            <tr>
                <td>First Name:</td>
                <td><asp:TextBox runat="server" Text=""></asp:TextBox></td>
            </tr>
            <tr>
                <td>Last Name:</td>
                <td><asp:TextBox ID="LastName" runat="server" Text=""></asp:TextBox></td>
            </tr>
            <tr>
                <td>Email:</td>
                <td><asp:TextBox ID="Email" runat="server" Text=""></asp:TextBox></td>
            </tr>
            <tr>
                <td>Role Name:</td>
                <td>
                    <asp:DropDownList ID="RoleName" runat="server">
                        <asp:ListItem Text="Select a role" Enabled="true" Value=""> </asp:ListItem>
                        <asp:ListItem Text="DC" Value="DC"> </asp:ListItem>
                        <asp:ListItem Text="ST" Value="ST"> </asp:ListItem>
                        <asp:ListItem Text="AD" Value="AD"> </asp:ListItem>
                        <asp:ListItem Text="CA" Value="CA"> </asp:ListItem>
                        <asp:ListItem Text="GSP" Value="GSP"> </asp:ListItem>
                        <asp:ListItem Text="GDC" Value="GDC"> </asp:ListItem>
                        <asp:ListItem Text="GST" Value="GST"> </asp:ListItem>
                        <asp:ListItem Text="GAD" Value="GAD"> </asp:ListItem>
                        <asp:ListItem Text="GCA" Value="GCA"> </asp:ListItem>
                        <asp:ListItem Text="GSP" Value="GSP"> </asp:ListItem>
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td><asp:Button ID="Addparticipant" runat="server" Text="Add Participant" /></td>
            </tr>
        </table>
    </div>
    <p class="flip">Show/Hide Panel</p>
</div>

ASP 代码:

Protected Sub Addparticipant_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Addparticipant.Click
    Response.Write("Hi it work yaar")
End Sub

Answer 1

作为 cookie 的替代方案，您可以查看 asp.net hidden fields 。您可以向其中写入值并使用 JavaScript 读回它们。

Here是一个关于如何使用 JS 读取\写入值到隐藏字段的示例。如果用户禁用了 cookie 选项，则该选项可能不起作用，在这种情况下，您可以使用隐藏字段作为后备选项。