如何在回发时保持 slideToggle 的状态？

Question

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

如果页面被刷新，如果用户之前点击了slideToggle()，<div> 的初始状态应该是可见的。同样，如果用户再次折叠<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 选项，它可能不起作用，在这种情况下，您可以使用隐藏字段作为后备选项。

Answer 2

您可以使用 cookie 来做到这一点，就像 airbai 指出的那样。如果您使用的是 jquery，它就像设置一样简单

$.cookie("ToggleStatus", toggleStatus);

toggleStatus 是您的切换元素当前是否可见。您可以通过以下方式检索它：

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

或者，您可以创建一个表单字段控件并将值保存在其中。

Answer 3

我在 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();
}

Answer 4

有多种方法可以保持 javascript 操作对象的状态。第一种是将其存储在 cookie 中。非常简单，大多数浏览器都支持：

$(function() {

    var cookie = document.cookie,
        state  = cookie.substr(cookie.search('buttonCollapsed=')+16,1),
        elem   = $('div.collapsable');

    if (state == 1) {
        elem.hide();
    }

    elem.slideToogle(function() {

        if ( elem.is(':visible') ) {
            document.cookie = "buttonCollapsed=0";
        } else {
            document.cookie = "buttonCollapsed=1";
        }

    });

});

这是一个很好的Documentation for Cookies in Javascipt。

在现代浏览器中，您可以使用本地存储。这是 Javascripts Webstorage 规范的一部分，应该已经在最新的浏览器版本中实现。例如，Firefox 从 3.5 版开始就支持它。在此存储中，您可以放置​​具有您需要的所有设置的复杂对象。您只需要将它们序列化为 JSON 字符串。真的很简单：

var settings = {
    buttonCollapsed: true,
    lastPage: 5,

    // ...

    someNumbers: [1,4,6,9]
};

// Write object into storage
window.localStorage['mySettings'] = JSON.stringify(settings);

// Read object fron storage
settings = JSON.parse(window.localStorage['mySettings']);

if(settings.buttonCollapsed) {
    $('div').hide();
}

如果您不需要支持具有完整功能的旧浏览器，我会使用本地存储。如果您以后想要存储更复杂的数据，您可以重用它。如果您构建一些访问器函数，例如save($key, $value) 和load($key)，它可能会更舒服。我已经开始jQuery plugin which uses the local storage，但它目前还没有准备好使用。也许你会得到一些灵感。

如果你想支持为新浏览器和旧浏览器存储状态，你应该检查本地存储是否可用：

if (typeof window.localStorage !== 'undefined') {
    // ... 
}

希望这会有所帮助...

Answer 5

您可以将状态保存在 cookie 中并在 window.onload 中检索。

Answer 6

我相信 Maxx 和 Airbai 对 cookie 的看法是正确的。

这里有一些链接：

COOQUERY Plugin

W3Schools explanation about js cookie

也许这会对你有所帮助 =)

Answer 7

根据我的经验，沿着 cookie 路径可能会导致膨胀，因为有人想要坚持的每个 用户交互 都会变成另一个 cookie。网站的 Cookies slow down the responsiveness。不要忘记，浏览器每次访问该服务器时都会发送 cookie。

我认为您真正应该问自己的是，在您的网站上坚持这一点有什么好处？它纯粹是装饰性的；如果用户启用了 JavaScript，一个很好的功能？如果禁用 JavaScript 会有什么影响？

也就是说，如果您想使用 jQuery 来读取/写入您的 cookie，您将需要（许多）jQuery cookie 插件之一。我认为最著名的是this one。或者看看Can jQuery read/write cookies to a browser? 有一些很好的答案。

就个人而言，我认为渐进式增强是要走的路。支持自动显示 slideToggle() <div>s 通过使用 local storage 来持久化/读取数据。无需担心 cookie，因为您拥有简单的客户端持久性。当然，主要缺点是这是相对较新的not all browsers support it。如果渐进增强（其中包括为使用现代浏览器的用户提供页面的增强版本）不符合您的要求，并且您还必须为旧浏览器实现此功能，您可能需要查看store.js和 nice article 说明为什么它很好。

Answer 8

尝试使用 localStorage 浏览器对象。这是跨浏览器库 jStorage 和 WEBSHIMS json-storage