有多个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/