토글 (숨기기/표시 유형 거래) 할 수있는 하위 메뉴가 있습니다. 메뉴의 마지막 상태를 기억하는 비교적 쉬운 방법이 있습니까? (머리글을 클릭 할 때 숨기기/표시 하위 메뉴를 열고 배경 스타일 화살표가 변경되도록 머리글의 스타일을 변경하십시오 (위/아래)). 괜찮 으면 작동하지만 마지막 상태를 기억하고 싶습니다. 따라서 사용자가 사이트의 다른 페이지로 돌아가서 돌아 오면 메뉴는 사용자가 남겨둔 것과 같은 방식으로 표시됩니다. 쿠키가 정말 좋지 않으므로 도움을 받으실 수 있습니다. 예, 메뉴는 PHP를 사용하여 db에서 동적으로 생성됩니다. 하위 메뉴가있는 헤더가 2 개 밖에 없지만 하위가 더 많아 지므로 하위 메뉴의 수에 따라 "확장 가능"한 방법이 필요합니다. 한 번 이상 방문 할 때도 기억할 필요가 없습니다. http://valleyofgeysers.com/geysers.phpJquery로 마지막 상태를 기억하는 법?
1
A
답변
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>
을 포장합니다.
관련 문제
- 1. 안드로이드에서 양식 데이터를 기억하는 법
- 2. jQuery로 페이드 인하는 법
- 3. Javascript 쿠키가 DIV 상태를 기억하는 방법?
- 4. Silverlight 탐색 : 페이지 상태를 기억하는 방법?
- 5. Vim에서 쓰는 정규식 패턴을 바꿀 때 검색 패턴을 기억하는 법?
- 6. jQuery로 CSS 파일을 읽는 법
- 7. jQuery로 spin.js 스피너를 멈추는 법
- 8. 브라우저는 새로 고침 후 양식 상태를 기억합니다. 피하는 법?
- 9. 상품의 마지막 상태를 얻으 십시요
- 10. 스윙 GUI 폼에서 마지막 값을 기억하는 방법은 무엇입니까?
- 11. jQuery로 호버 상태를 강제 설정하는 방법?
- 12. jQuery로 CSS 스타일 호버 상태를 페이드로 애니메이트
- 13. 힘찬 밀어주고 싶습니까? 즉, 마지막 상태를 확인하십시오.
- 14. 시작시 응용 프로그램의 마지막 상태를 표시 하시겠습니까?
- 15. 정규식, jQuery로 문자열의 마지막 특정 문자를 제거하십시오.
- 16. 내역을 기억하는 SQLPLUS 세션
- 17. 장고 매김은 - 기억하는 페이지
- 18. PHP의 페이지 매김에서 체크 박스 상태를 유지하는 법
- 19. 두 양식 간의 변수를 기억하는 방법은 무엇입니까?
- 20. rapidxml : 노드를 통해 반복하는 법? 마지막 형제 밖으로 나뭇잎
- 21. null을 반환하는 jQuery로 Facebook 상태를 가져 오는 중
- 22. jQuery로 왼쪽으로 이동
- 23. Prototype-ui 슬라이드 위치를 기억하는 방법?
- 24. 루프에서 OpenCV로 이전 이미지를 기억하는 방법은 무엇입니까?
- 25. GWT에서 텍스트 상자 입력 내역을 기억하는 방법
- 26. .NET 데이터 형식의 저장소 크기를 기억하는 방법?
- 27. Visual Studio에서 JavaScript 설정을 기억하는 방법
- 28. 원하는 페이지를 기억하는 가장 좋은 방법
- 29. 목록에 mouseclick 이벤트의 좌표를 기억하는 방법은 무엇입니까?
- 30. Treeview 플러그인 축소 설정을 기억하는 방법
감사합니다. 도움이됩니다. 또한이 줄을 추가했습니다. $ ('div : hidden'). prev ('h3'). addClass ('openit'); $ ('div : visible'). prev ('h3'). addClass ('closeit'); 및 h3 태그에서 클래스 속성을 제거하십시오. 이제 제대로 작동하는 것 같습니다. 다시 한번 감사드립니다. –