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/

带有多个SlideToggle菜单的jQuery Cookies

1 个答案: