아코디언메뉴 session storage 질문드립니다.
본문
<ul id="accordion" class="gnb accordion">
<li class="home open">
<a th:href="@{/dashboard/main}" class="link">HOME</a>
<ul class="gnb_2depth"></ul>
</li>
<li class="statistics">
<a href="javascript:void(0);" class="link">통계</a>
<ul class="gnb_2depth">
<li><a href="#">매체별 통계</a></li>
<li><a href="#">광고별 통계</a></li>
</ul>
</li>
<li class="question">
<a href="javascript:void(0);" class="link">문의</a>
<ul class="gnb_2depth">
<li><a th:href="@{/consult/consults}">상담 신청 리스트</a></li>
<li><a th:href="@{/consult/exceptConsults}">상담 제외 리스트</a></li>
</ul>
</li>
<li class="setting">
<a href="javascript:void(0);" class="link">환경설정</a>
<ul class="gnb_2depth">
<li><a href="#">계정관리</a></li>
<li><a href="#">계정권한 관리</a></li>
<li><a href="#">메뉴권한 관리</a></li>
</ul>
</li>
<li class="setting">
<a href="javascript:void(0);" class="link">로또생성기</a>
<ul class="gnb_2depth">
<li><a th:href="@{/generateNumber}">로또 번호 리스트</a></li>
</ul>
</li>
<style>
.accordion .open {
background: #f6f8ff;
}
.gnb_2depth {display: none;}
</style>
<script>
var Accordion = function (el, multiple) {
this.el = el || {};
this.multiple = multiple || false;
var links = this.el.find('.link');
links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown);
};
Accordion.prototype.dropdown = function (e) {
var $el = e.data.el;
$this = $(this),
$next = $this.next();
$next.slideToggle();
$this.parent().addClass('open');
if (!e.data.multiple) {
$el.find('.gnb_2depth').not($next).slideUp().parent().removeClass('open');
};
};
var accordion = new Accordion($('#accordion'), false);
</script>
아코디언 코드에서 클릭하면 open 클래스가 적용되고 메뉴를 클릭후 이동하거나 새로고침해도 부모태그의 open class를 마지막으로 클릭한 곳에 적용시키고 싶은데 session storage를 적용시키고 싶은데 어떻게 해야할지 모르겠습니다.
!-->답변 1
php로 처리하는 2가지 방법이 있는데요..
1. url 로 해당 메뉴인지 체크해서 open 클래스를 echo 해주는 방법
2. 각 페이지별로 메뉴번호 변수를 메뉴 상단에 선언해줘서,
해당 메뉴 번호이면 open 클래스를 echo 해주는 방법
답변을 작성하시기 전에 로그인 해주세요.