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