2010-03-26 4 views
1

토글 (숨기기/표시 유형 거래) 할 수있는 하위 메뉴가 있습니다. 메뉴의 마지막 상태를 기억하는 비교적 쉬운 방법이 있습니까? (머리글을 클릭 할 때 숨기기/표시 하위 메뉴를 열고 배경 스타일 화살표가 변경되도록 머리글의 스타일을 변경하십시오 (위/아래)). 괜찮 으면 작동하지만 마지막 상태를 기억하고 싶습니다. 따라서 사용자가 사이트의 다른 페이지로 돌아가서 돌아 오면 메뉴는 사용자가 남겨둔 것과 같은 방식으로 표시됩니다. 쿠키가 정말 좋지 않으므로 도움을 받으실 수 있습니다. 예, 메뉴는 PHP를 사용하여 db에서 동적으로 생성됩니다. 하위 메뉴가있는 헤더가 2 개 밖에 없지만 하위가 더 많아 지므로 하위 메뉴의 수에 따라 "확장 가능"한 방법이 필요합니다. 한 번 이상 방문 할 때도 기억할 필요가 없습니다. http://valleyofgeysers.com/geysers.phpJquery로 마지막 상태를 기억하는 법?

답변

4

그런 다음 설정 한 쿠키를 기반으로 표시되는 것 하중 세트에 보여 숨어 때 그냥 쿠키를 설정 jQuery cookie plugin for this

를 사용할 수 있습니다

현재 url은이입니다. 당신이 (우리가 쿠키를 설정하는 고유 ID를 가지고),이 같은 일을해야 간헐천으로 가지고있는 것처럼 당신이 <div id="unique"> 각 메뉴를 포장하면 "display" - this.id

:이 같은 쿠키 이름을 지정하여이 작업을 수행 할 수 있습니다

$('h3').next('.g_menu').filter(function() { 
    return $.cookie("expanded-" + $(this).parent("[id]").attr("id")); 
}).hide(); 

$('h3').click(function(){ 
    $(this).toggleClass('closeit').toggleClass('openit'); 
    var menu = $(this).next('.g_menu'); 
    if(menu.is(':visible')) { 
     menu.fadeOut(50); 
     $.cookie("expanded-" + $(this).parent().attr("id"), true); 
    } else { 
     menu.fadeIn(980);    
     $.cookie("expanded-" + $(this).parent().attr("id"), null); 
    } 
});​ 

이 작업을 <div id="other"></div>You can play with a sample to see this in action here<h3 class="openit">Other</h3><div class="g_menu"></div>을 포장합니다.

+0

감사합니다. 도움이됩니다. 또한이 줄을 추가했습니다. $ ('div : hidden'). prev ('h3'). addClass ('openit'); $ ('div : visible'). prev ('h3'). addClass ('closeit'); 및 h3 태그에서 클래스 속성을 제거하십시오. 이제 제대로 작동하는 것 같습니다. 다시 한번 감사드립니다. –

관련 문제