javascript - 我该如何在回发后保持slideToggle的状态？

我希望jQuery slideToggle() 保持其状态。默认情况下，页面加载时是折叠的。对于应用了slideToggle()的<div>，有一个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

最佳答案

我在jsfiddle中为您创建了一个示例，说明如何使用Cookie保存和检索您的http://jsfiddle.net/6KkCE/切换状态

JavaScript代码:

var panel = $(".panel"), flip = $(".flip"),
    state = $.cookie("ToggleStatus");

flip.click(function() {
    panel.slideToggle("slow", function() {
        $.cookie("ToggleStatus", (state == 1? "0" : "1"));
    });
});

if ((state == 0 && panel.is(':visible'))) {
    panel.slideUp();
}

关于javascript - 我该如何在回发后保持slideToggle的状态？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/5523082/