쿠키를 사용하여 아코디언으로 연결 상태를 기억하십시오.

Question

여기에서 코드 http://www.designchemical.com/blog/index.php/jquery/jquery-simple-vertical-accordion-menu-with-cookies/을 사용하여 프로젝트에 맞도록 수정했으며 실제로 잘 작동합니다. 이제 나는 극복 할 수없는 두 가지 장애물이 있습니다.

1 : 쿠키가 내가 마지막으로 클릭 한 링크의 상태도 저장할 수 있습니까? CSS를 사용하여 다른 배경색을 적용 할 수 있도록 클래스를 제공하는 것처럼? 자식 uls 중 하나에서 링크를 클릭하면 한 번에 하나의 링크 만 활성화됩니다. 다시 클래스를 제거해야합니다.

2 : 아코디언 위에 로고를 클릭하여 페이지를 새로 고침하면 열어 둡니다. 내가 사이트를 처음 방문했을 때처럼 다시 붕괴되기를 바랍니다.

까다로운 내용. 나는 이것은 JS입니다

(could'nt는 jsfiddle에 작동하도록) 작업 데모 here 있습니다

$(document).ready(function() { 
    var checkCookie = $.cookie("nav-item"); 
    if (checkCookie != "") { 
    $('#nav > li > a:eq('+checkCookie+')').addClass('active').next().show(); 
    } 
    $('#nav > li > a').click(function(){ 
     var navIndex = $('#nav > li > a').index(this); 
     $.cookie("nav-item", navIndex); 
     $('#nav li ul').slideUp(); 
     if ($(this).next().is(":visible")){ 
      $(this).next().slideUp(); 
     } else { 
     $(this).next().slideToggle(); 
     } 
     $('#nav li a').removeClass('active'); 
     $(this).addClass('active'); 
    }); 
}); 

덕분에 많은 사전에!

Answer 1

첫 번째 질문에 답하기 위해 이미 그 작업을 수행하고 있습니다. 이것이 활성 링크가 더 어두운 이유입니다. (비슷한 당신이 그도 가능 활성 때 다른 색깔을 가지고 하나 하나를 원하는 경우

#nav li a:hover, #nav li a.active {background: #999; color: #fff;} 

,하지만 당신은 그들에게 고유 ID를 부여 할 것 :이 라인에 대한 태그 내보고 다른 색상의 값을 변경 하지만 일반적으로 요소별로 고유) CSS 선택기를 사용하여 속성을 수정합니다.

두 번째 질문의 경우,이 라인을 제거하려고 :

if (checkCookie != "") { 
    $('#nav > li > a:eq('+checkCookie+')').addClass('active').next().show(); 
    } 

를이 페이지로드 후 쿠키의 저장 값을 확인 어디 그건 때문입니다. 저를 위해 저를 위해 과자를 저장하고 있지 않다 그래서 나는 일한 그것을 확인할 수 없었다. 페이지로드시 nav-item 쿠키를 지울 수 있습니다.