JQuery -记住打开的折叠状态

Question

我目前有一个jquery accordion，它能做我想做的事情，除了一件事。当我单击accordion面板中的链接转到另一个页面时，我希望当我单击back按钮时，accordion在相同的位置(如果可能)保持打开。后退按钮是我创建的图像，而不是浏览器的后退按钮。

这是我的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>

它可以很好地打开和滚动，如果在不同的折叠面板中有一段很长的文本，被点击的面板会跳到屏幕视图中。

我不想改变它当前所做的事情，我只想在单击back按钮图像时添加一个记忆状态。

我读过有关jquery cookies的文章，但老实说，我甚至不知道从哪里开始包含它。

任何帮助都将不胜感激！

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。您可以退回到cookies来做同样的事情。

Answer 2

您可以创建一个标志，并在单击折叠菜单时将其设置为true。

单击Back按钮，检查标志是否设置为true或false。如果设置为true，只需触发该选择器的单击操作即可。

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