如何在帖子后面保持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隐藏字段.您可以为其编写值并使用javascript将其读回.

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

Answer 2

你可以用cookies来做到这一点,就像airbai指出的那样.如果你正在使用jquery,它就像设置一样简单

$.cookie("ToggleStatus", toggleStatus);

toggleStatus是您的切换元素当前是否可见.你可以用以下方法检索它:

var toggleStatus = $.cookie("ToggleStatus");

或者,您可以创建表单字段控件并将值保存在那里.