JQuery - 记住打开手风琴状态

Question

我目前有一个 jquery 手风琴，它完全符合我的要求，除了一件事。当我单击手风琴面板中的链接以转到另一个页面时，我希望手风琴在单击后退按钮时在同一位置（如果可能）保持打开状态。后退按钮是我创建的图像，而不是浏览器的后退按钮。

这是我的 jquery 脚本：

<script>
 $(function() {
    $(".jquery-ui-accordion").accordion({
        autoHeight: false,
        collapsible: true,
        heightStyle: "content",
        active: false,
        animate: 300 // collapse will take 300ms
    });
    $('.jquery-ui-accordion h3').bind('click',function(){
        var self = this;
        setTimeout(function() {
            theOffset = $(self).offset();
            $('body,html').animate({ scrollTop: theOffset.top - 100 });
        }, 310); // ensure the collapse animation is done
    });
});
</script>

这是我的标题中的内容：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

它可以很好地打开和滚动，如果另一个手风琴面板中有很长的文本，则单击的面板将跳转到屏幕视图。

我不想更改它当前的功能，我只想在单击后退按钮图像时添加一个记住状态。

我已经阅读了有关 jquery cookie 的信息，但老实说，我什至不知道从哪里开始包含它。

任何帮助将不胜感激！

Answer 1

您可以使用localStorage，如下所示：

$(document).ready(function () {
        var selectedIndex = localStorage.getItem("selected"),
            // If a valid item exits in localStorage use it, else use the default
            active = (selectedIndex >= 0) ? parseInt(selectedIndex) : false;
        console.log(active);
        $(".jquery-ui-accordion").accordion({
            active: active,
            autoHeight: false,
            collapsible: true,
            heightStyle: "content",
            animate: 300, // collapse will take 300ms,
            activate: function (event, ui) {
                if (ui.newHeader.length) // item opened
                    var index = $('.jquery-ui-accordion h3').index(ui.newHeader);
                if (index > -1)  // has a valid index
                    localStorage.setItem("selected", index);


            }
        });

        $('.jquery-ui-accordion h3').bind('click', function () {
            var self = this;
            setTimeout(function () {
                theOffset = $(self).offset();
                $('body,html').animate({
                    scrollTop: theOffset.top - 100
                });
            }, 310); // ensure the collapse animation is done
        });
    });

在使用它之前不要忘记check whether localStorage is supported or not。你回退到 cookie 做同样的事情。

Answer 2

您可以创建一个标志并在点击手风琴时将其设置为true。

单击后退按钮时，检查标志设置为真还是假。如果设置为true，只需触发该选择器的点击动作即可。

$('.jquery-ui-accordion h3').trigger('click')