.toggle()을 사용할 때 접을 수있는 jQuery 메뉴의 쿠키 설정

Question

접을 수있는 세로 목록에 쿠키를 설정하려고하는데 .toggle()을 사용하여 목록을 숨기거나 표시하고 jQuery Cookie Plugin을 사용하고 있습니다. 다음 CSS로

<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> 

: 나는이 같은 정말 간단 탐색이

.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를 :이 코드는 각각에 다른 쿠키 값을 할당하여 여러 하위 메뉴와 함께 작동합니다. 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(); 
    } 
});