带多个 SlideToggle 菜单的 jQuery Cookie

Question

我有多个使用 .slideToggle 的菜单（我目前正在学习 jQuery）。使用在线教程和各种其他资源，我认为我所拥有的应该能够记住我的 SlideToggle 菜单的状态，无论它们位于网站上的哪个位置。到目前为止有四个菜单，当我对网站进行更改时，这可能会随机更改。这是菜单的结构：

<aside class="widget">
<h2 class="trigger">Blog Topics</h2>
<ul id="menu-blog-topics" class="menu">
<li></li>
</ul>
</aside>

<aside class="widget">
<h2 class="trigger">Wordpress</h2>
<ul id="menu-wordpress-3" class="menu">
<li></li>
</ul>
</aside>

我的 jQuery：

function initMenu() { 
    $('ul.menu').hide(); 
    $('h2.trigger').click( 
            function() { 
                    $(this).next().slideToggle('slow',function(){ 
                            var id = $(this).attr('id'); 
                            if ($(this).is(':hidden')) { 
                                    var state = "closed"; 
                            } else if ($(this).is(':visible')) { 
                                    var state = "open"; 
                            } 
                            return false; 
                     }); 
            } 
    ); 
} 

jQuery(document).ready(function() {initMenu();});

slideToggle 功能正常。只是不会一页一页地记住状态。

Answer 1

您只是缺少一些存储和检索 cookie 的行。

function initMenu() {   
    $('ul.menu').hide();   

    $('h2.trigger').click(   
        function() {   
            $(this).next().slideToggle('slow', function() {   
                var id = $(this).attr('id');   
                $.cookie(id, $(this).is(':hidden') ? "closed" : "open"); 
                return false;   
            });   
        }   
    ); 

    $('h2.trigger').each(function() { 
        var id = $(this).next().attr('id'); 
        if ($.cookie(id) == "open")  $(this).next().show(); 
    }); 
}

jQuery(document).ready(function() {initMenu();}); 

您可以在这里查看：http://jsfiddle.net/GZmHY/9/