펼침 메뉴 쿠키로 고정하는 방법을 알려주세요.
본문
안녕하세요.
항상 눈팅만 하다가 안되는게 있어서 질문을 올립니다.
좌측 메뉴 리스트가 일반적으로는 펼쳐있다가 접기를 누르고 새로고침이나, 창 이동 후에도 계속 접힌 상태로 유지하고 싶은데, 쿠키 적용하는 방법을 모르겠습니다.ㅠㅠ
<div id="left_main_set">
<div id="container_title1">좌측 메뉴</div>
<div class="left_menu_box">
<p class="left_menu_title">펼침 목록1</p>
<div>
<p><a href="경로">메뉴</a></p>
<p><a href="경로">메뉴</a></p>
<p><a href="경로">메뉴</a></p>
<p><a href="경로">메뉴</a></p>
</div>
</div>
<div class="left_menu_box">
<p class="left_menu_title">펼침 목록2</p>
<div>
<p><a href="경로">메뉴</a></p>
<p><a href="경로">메뉴</a></p>
<p><a href="경로">메뉴</a></p>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".left_menu_title").toggle(function(e){
e.preventDefault();
$(this).next(). slideUp();
},function(e){
e.preventDefault();
$(this).next().slideDown();
});
});
</script>
위 코드가 좌측 메뉴 내용이고, 하단에 j쿼리 스크립트가 타이틀을 클릭하면 바로 아래 있는 <div></div>가 접히도록 만들어 줍니다.
위에 있는 코드에서 어디를 수정해야 하는지, 아니면, 새로운 코드가 있다면, 복사 붙여넣기가 가능하도록 부탁드립니다.ㅠㅠ
답변 3
접을때 쿠키를 하나 생성합니다.
쿠키 값에는 클래스 명을 넣습니다.
그리고 펼침을 누르면 해당 쿠키를 삭제합니다.
쿠키 값에는 클래스 명이 있기 때문에
해당 클래스명이 있으면 접어져있는 상태로 유지시키고
클래스명이 없다면 펼침으로 하시면 간단하게 처리가 될것같네요
좋은 정보 감사합니다.
많은 도움이 되었습니다.
펼치거나 접을때 ajax 로 쿠키를 굽고, 쿠키값을 이용해 초기값을 display 로 제어하면 될 것 같네요.
ajax 로 쿠키를 구워도 되고, jquery cookie 로 구워도 상관은 없을 듯 합니다.
jquery cookie 는 아래 링크를 참고하시면 되겠습니다.
https://www.fun25.co.kr/blog/jquery-cookie-simple-sample/?page=9
좋은 정보 감사합니다.
많은 도움이 되었습니다.
채택이 한분밖에 되지 않아서 미안합니다.
우선,
사이드뤠이스님, 그누위즈님 도움글 주셔서 너무 감사합니다.
두분의 도움으로 꾸역꾸역 구현은 했습니다.
두 메뉴 영역이 따로 열리고 닫히도록 되어 있어서, 무식하게(?) 코딩한것 같은데 한가지 문제가 있네요..ㅠㅠ
접힌 상태에서 새로고침이나 페이지 이동 후, 펼칠 때 한번 클릭으로 동작하지 않고, 두번 클릭해야 동작이 되는 문제가 있어서 다시 문의를 드립니다.
아래 소스코드를 보시고, 원할하게 동작될 수 있도록 수정부탁드립니다.
<div id="left_main_set">
<div id="container_title1">좌측 메뉴</div>
<div class="left_menu_box">
<p class="left_menu_title1">펼침 목록1</p>
<div>
<p><a href="경로">메뉴</a></p>
<p><a href="경로">메뉴</a></p>
<p><a href="경로">메뉴</a></p>
<p><a href="경로">메뉴</a></p>
</div>
</div>
<div class="left_menu_box">
<p class="left_menu_title2">펼침 목록2</p>
<div>
<p><a href="경로">메뉴</a></p>
<p><a href="경로">메뉴</a></p>
<p><a href="경로">메뉴</a></p>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".left_menu_title1").toggle(function(e){
e.preventDefault();
$(this).next(). slideUp();
$.cookie("menuUP1", "menu_up1", { expires: 365, path: '/' });
},function(e){
e.preventDefault();
$(this).next().slideDown();
$.removeCookie("menuUP1", {path: "/"});
});
$(".left_menu_title2").toggle(function(e){
e.preventDefault();
$(this).next(). slideUp();
$.cookie("menuUP2", "menu_up2", { expires: 365, path: '/' });
},function(e){
e.preventDefault();
$(this).next().slideDown();
$.removeCookie("menuUP2", {path: "/"});
});
$("."+$.cookie("menuUP1")).next(). slideUp();
$("."+$.cookie("menuUP2")).next(). slideUp();
});
</script>
