Question

我希望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

Answer 1

你可以使用cookies，就像airbai指出的那样。如果您使用的是jquery，那就像设置

一样简单

$.cookie("ToggleStatus", toggleStatus);

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

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

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

Answer 2

作为Cookie的替代品，您可以查看 asp.net hidden fields 。您可以为其编写值并使用javascript将其读回。

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

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对饼干是正确的。

这里有一些链接：

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?，它有一些很好的答案。

就个人而言，我认为渐进式增强是可行的方法。支持使用local storage自动显示slideToggle（）<div>以保持/读取数据。没有cookie担心，因为你有简单的客户端持久性。当然，主要的缺点是这是相对较新的not all browsers support it。如果渐进增强（其中包括为用户提供现代浏览器的页面的增强版本）不符合您的要求，您也必须为旧版浏览器实现此功能，您可能需要查看{{3和store.js关于为什么它是好的。

Answer 8

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

如何在帖子后面保持slideToggle的状态？

8 个答案: