设置 cookie 以记住手风琴状态答案

【问题标题】：Setting a cookie to remember accordion state设置 cookie 以记住手风琴状态
【发布时间】：2012-12-28 17:23:25
【问题描述】：

在过去的几天里，我一直在尝试创建一个 cookie（使用 https://github.com/carhartl/jquery-cookie）来记住我的手风琴菜单的打开状态。我在这里梳理了谷歌和以前的答案，但到目前为止我还没有运气好让它工作。

Here is the code 正在生成手风琴菜单..

如果有人能帮助阐明这一点，我将不胜感激..

【问题讨论】：

更简单的解决方案，稍微修改一下 URL 以保持 Accordion ID。
@Joddy 这是一个更简单的解决方案吗？这不会在浏览器会话中提供持久的手风琴状态。

标签： jquery cookies accordion

【解决方案1】：

我前段时间写了一个版本，并把它放到网上：http://jaaulde.com/test_bed/stickyaccordion/

我使用了以下代码：

$(function () {
    var cookieName = 'stickyAccordion';

    $('#accordion').accordion({
        active: ($.cookies.get(cookieName) || 0),
        change: function (e, ui) {
            $.cookies.set(cookieName, $(this).find('h3').index(ui.newHeader[0]));
        }
    });
});

由于这是前段时间，它使用了jQuery 1.4.1 和jQuery UI 1.7.2。

它还使用了我自己的个人JavaScript / jQuery cookies library。如果你想使用 carhartl's 这是一个完全有效的选择。您只需将我对 $.cookies.set 和 $.cookies.get 的调用替换为他的等价物。

编辑：我很抱歉，当我看到你的问题提到 jQuery 和手风琴时，我以为你的意思是 jQuery UI's accordion。如您所见，它使事情变得非常简单。由于您没有使用 UI，因此此答案可能对您无效。如果是这种情况，我可能会抽出一些时间为您现有的解决方案添加 cookie 支持。

【讨论】：

这个特殊的手风琴没有使用 jQuery UI 来创建元素，但我仍在浏览 jquery-cookie 的文档，所以也许我会很幸运。但是，如果您确实有时间再次查看代码，那就太好了。
我旅行回来了——你现在在这个问题上的立场是什么？
我不得不使用 parseInt 强制从 cookie 中输出的内容为整数，以使其在 IE 11 中工作

【解决方案2】：

我使用来自Klaus Hartl 的 cookie 插件编写了这个 sn-p：

cookieName = 'myHotCookie';

$(".accordion").accordion({
    'active' : (parseInt($.cookie(cookieName)) || false),
    'header' : 'h3',
    activate: function (event, ui) {
        $.cookie(cookieName,parseInt($(this).accordion('option','active')));
    }
});

parseInt 似乎是必要的，因为获取 id 是作为字符串呈现的。

【讨论】：

【解决方案3】：

在我的例子中，安装了 cms contao 3.x 和 jquery cookie 插件。使用 jquery 1.9 (chrome/ff) 进行了尝试，它适用于以下代码：

var cookieName = 'myHotCookie';
    $(document).accordion({
        // Put custom options here
        heightStyle: 'content',
        header: 'div.toggler',
        collapsible: true,
        animated: 'slide',
        active : (parseInt($.cookie(cookieName)) || 0),
        activate: function (event, ui) {
            $.cookie(cookieName,parseInt($(this).accordion('option','active')));
        }
  });

【讨论】：