使用.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(); 
    } 
});