使用.toggle（）設置可摺疊jQuery菜單的Cookie

Question

我試圖在可摺疊垂直列表上設置Cookie，我使用.toggle（）隱藏並顯示列表和jQuery Cookie Plugin。我有非常簡單的導航這樣的：

<ul class="menu-sidebar"> 
    <li>Item 1</li> 
    <li><a href="#">Item 2</a> 
    <ul> 
     <li>Item 2.1</li> 
    </ul> 
    </li> 
    <li><a href="#">Item 3</a> 
    <ul> 
     <li>Item 3.1</li> 
    </ul> 
</li> 
<li>Item 4</li> 
</ul> 

有了下面的CSS：

.js .menu-sidebar li ul{display:none;} 

然後我切換列表如下：

jQuery(document).ready(function(){ 
    $('.menu-sidebar li:has(ul) a').click(function(){ 
    $(this).next().toggle(); 
    }); 
}); 

它的簡單和偉大工程，但我可以」我真的不知道如何在這方面選擇餅乾。我一直想這樣做：

$('.menu-sidebar li:has(ul) a').click(function(){ 
    $(this).next().toggle(); 

    if ($(this).next().is(':visible')){ 
    $.cookie('verticalNav', 'expanded'); 
    } 

    if ($(this).next().is(':hidden')){ 
    $.cookie('verticalNav', 'collapsed'); 
    } 

    var verticalNav = $.cookie('verticalNav'); 
    if (verticalNav == 'expanded'){ 
    $(this).next().show(); 
    } 
}); 

沒有運氣。有小費嗎？謝謝！ :)

Answer 1

取出click（）方法的最後一個塊。它內部是多餘的。 （而且，當然，它包全部$(document).ready(function() {...});塊內。）

UPDATE：此代碼將通過分配不同的Cookie值到每一個與多個子​​菜單工作。 http://jsfiddle.net/GDudf/13/

$('.menu-sidebar li:has(ul) a').click(function() { 
    $(this).next().toggle(); 
    if ($(this).next().is(':visible')) { 
     $.cookie($(this).text(), 'expanded'); 
    } 

    if ($(this).next().is(':hidden')) { 
     $.cookie($(this).text(), 'collapsed'); 
    } 
}); 

$('.menu-sidebar > li').each(function() { 
    var verticalNav = $.cookie($(this).children('a').text()); 
    if (verticalNav == 'expanded') { 
     $(this).find('ul').show(); 
    } 
});