Question

我设置了手风琴风格导航列表，以便在点击类别时打开它以显示链接到页面的子类别。

我想做的是让手风琴导航列表在新页面打开时保持打开或关闭状态。

我已经收集了cookie以保持刷新状态，但是当访问不同页面时如何保留状态？所有页面都有相同的手风琴导航列表。

Answer 1

试试Web Storage。在页面卸载时存储选项卡的状态，恢复页面加载事件的状态。

Answer 2

我找到了一个解决方案，它使用了这里的手风琴插件，http://www.i-marco.nl/weblog/archive/2010/02/27/yup_yet_another_jquery_accordi和jquery cookie.js插件

我将id添加到HTNL标记中的标题锚点，就像这样，

 <li>
        <a id="m1" class="label" href="#">Sound/Audio Systems</a>
        <ul class="acitem">
            <li><a href="products.php?sub_cat=PA_Systems">PA Systems</a></li>
            <li><a href="#">Loudspeakers</a></li>
            <li><a href="#">Microphones </a></li>
            <li><a href="#">DJ Equipment</a></li>
            <li><a href="#">Sound Processing Equipment</a></li>
        </ul>
    </li>

并修改了accordian.js代码，我添加了以$ .cookie开头的行，以及document.ready funciton中的If语句。

jQuery.fn.initMenu = function() {  
return this.each(function(){
    var theMenu = $(this).get(0);
    $('.acitem', this).hide();
    $('li.expand > .acitem', this).show();
    $('li.expand > .acitem', this).prev().addClass('active'),
    currentID = "";
    $('li a', this).click(
        function(e) {
            e.stopImmediatePropagation();
            var theElement = $(this).next();
            var parent = this.parentNode.parentNode;
            if($(parent).hasClass('noaccordion')) {
                if(theElement[0] === undefined) {
                    window.location.href = this.href;
                }
                $(theElement).slideToggle('normal', function() {
                    if ($(this).is(':visible')) {
                        $(this).prev().addClass('active');
                        currentID = $(this).prev().attr('id');
                        $.cookie('menustate', currentID, {expires: 2, path: '/'});
                    }
                    else {
                        $(this).prev().removeClass('active');
                        $.cookie('menustate', null, {expires: 2, path: '/'});
                    }    
                });
                return false;
            }
            else {
                if(theElement.hasClass('acitem') && theElement.is(':visible')) {
                    if($(parent).hasClass('collapsible')) {
                        $('.acitem:visible', parent).first().slideUp('normal', 
                        function() {
                            $(this).prev().removeClass('active');
                            $.cookie('menustate', null, {expires: 2, path: '/'});
                        }
                    );
                    return false;  
                }
                return false;
            }
            if(theElement.hasClass('acitem') && !theElement.is(':visible')) {         
                $('.acitem:visible', parent).first().slideUp('normal', function() {
                    $(this).prev().removeClass('active');
                    $.cookie('menustate', null, {expires: 2, path: '/'});
                });
                theElement.slideDown('normal', function() {
                    $(this).prev().addClass('active');
                    currentID = $(this).prev().attr('id');
                    $.cookie('menustate', currentID, {expires: 2, path: '/'});
                    });
                    return false;
                }
            }
        }
    );
});

};



$(document).ready(function() {
$('.menu').initMenu();$('#side-navigation_frame').show();
if ($.cookie('menustate')) {
    var anchor = "",
        elementID = $.cookie('menustate');
    anchor = document.getElementById(elementID);
    $(anchor).addClass('active');
    $(anchor).next().show();

}
});

它很好用，对初学者来说也不错，感谢所有的建议。

Rob Fenwick

Answer 3

Cookies在指定它们的完整路径和域中“保留状态”。因此，如果您可以让它们只在一个页面上工作，那么您应该让它们在您网站的所有页面上自动运行。

Answer 4

您仍然可以使用Cookie，您只需要确保它们不是特定于一个页面。例如：

document.cookie = 'openitem=5; expires=somedate; path=/';

网站上的所有页面都可以访问

。 More about cookies.

Answer 5

好的，所以我看了一下你正在使用的库，它是一个不错的库，除了你可能会发现如果你使用像jQuery UI这样的更标准的库，它会更容易找到你的问题的解决方案，它有手风琴控制http://jqueryui.com/demos/accordion/就像我提到的那样，有很多人使用它，可以找到大多数问题的答案。

但就像我提到的那样，我确实看了你的图书馆。正如其他人所提到的，你会使用cookie来存储价值。这个图书馆支持“预扩展”＃39;手风琴的特定部分，为此，您可以将扩展类添加到元素中。您可以执行该服务器端，也可以在调用initMenu（）之前使用JavaScript执行此操作。

另一个不太优雅的选项是在调用initMenu后触发锚标记上的click事件。最后，你可以使用jQuery的show（）来展示没有动画的部分。

您要做的第一件事就是找出点击了哪个部分，然后将部分名称存储在Cookie中。在页面加载时，您将获得该值并展开相应的相应部分。这就是代码应该是什么样子 - 注意这是伪代码，你已经填写了适当的部分。

$(function() {
    $(".menu.collapsible .label").click(function() {
       var accordianSection = $(this).text();
       rememberSection(accordianSection);
    });

    var section = recallSection();
    if(section !== undefined) {
        expandSection(section);
    }
});

expandSection函数看起来像这样：

var sectionLink = $(".menu.collapsible .label").filter(function() { 
    return $(this).text() == section;
});
sectionLink.trigger('click');

如何在页面更改时保留Javascript状态

5 个答案: