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还是false。如果将其设置为true，则只需触发该选择器的点击操作。

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

JQuery - 记得打开手风琴状态

2 个答案: