메뉴 active 상태 유지하는데 문제가 있습니다.
본문
안녕하세요.
현재 아래의 코드를 메뉴에 적용해서 사이트를 만들어보고 있습니다.
https://codepen.io/piyushpd/pen/eYWWeNL
코드에는 클릭된 ul이나 li에 대한 active 상태를 유지하는 코드가 있는 것 같은데
정작 다른 페이지로 가거나 리로드하면 다 초기화 되어 버립니다.
메뉴를 계속 수정해야해서 menu.php로 만들고 테마의 head.sub.php인클루드 했기 때문일까요?
아니면 아래와 같은 제 코드에 문제가 있는걸까요?
고견주시면 큰 도움이 될 것 같습니다.
감사합니다.
<script>
// -------multilevel-accordian-menu---------
$(document).ready(function() {
$("#accordian a").click(function() {
var link = $(this);
var closest_ul = link.closest("ul");
var parallel_active_links = closest_ul.find(".active")
var closest_li = link.closest("li");
var link_status = closest_li.hasClass("active");
var count = 0;
closest_ul.find("ul").slideUp(function() {
if (++count == closest_ul.find("ul").length){
parallel_active_links.removeClass("active");
parallel_active_links.children("ul").removeClass("show-dropdown");
}
});
if (!link_status) {
closest_li.children("ul").slideDown().addClass("show-dropdown");
closest_li.parent().parent("li.active").find('ul').find("li.active").removeClass("active");
link.parent().addClass("active");
}
})
});
// --------for-active-class-on-other-page-----------
jQuery(document).ready(function($){
// Get current path and find target link
var path = window.location.pathname.split("/").pop();
// Account for home page with empty path
if ( path == '' ) {
path = 'index.html';
}
var target = $('#accordian li a[href="'+path+'"]');
// Add active class to target link
target.parents("li").addClass('active');
target.parents("ul").addClass("show-dropdown");
});
</script>
<div id="accordian">
<ul class="show-dropdown">
<li class="solo">
주요테스트
</li>
<li class="active">
<a href="javascript:void(0);"><i class="fas fa-car-alt" style="margin-right:5px"></i>테스트그룹</a>
<ul class="show-dropdown">
<li>
<a href="javascript:void(0);"><img src=../../logo/test.png> 테스트</a>
<ul>
<li><a href="/test1">테스트1</a></li>
<li><a href="/test2">테스트2</a></li>
<li><a href="/test3">테스트3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
답변 2
1. 다른 페이지로 이동시 active 상태를 유지하려면 링크시에 고유키 또는 고유 번호를 넘겨서
<?if($_GET['num']==1){?> class="active"<?}?> 처럼 프로그램 처리해주시면 됩니다
2. 리로드시 (아무 코드값이없고 해당 메뉴 클릭 후 (show-dropdown 상태 가 활성화 된 상황에서))
펼쳐진 대로 유지하려면
위 스크립트 코드에서 show-dropdown 을 add 할때 cookies 를 생성시켜서 cookie 가 있으면 활성화 시키도록 코드를 추가하셔야 합니다
// --------for-active-class-on-other-page-----------
jQuery(document).ready(function($){
// Get current path and find target link
var path = window.location.pathname.split("/").pop();
// Account for home page with empty path
if ( path == '' ) {
path = 'index.html';
}
var target = $('#accordian li a[href="'+path+'"]');
// Add active class to target link
target.parents("li").addClass('active');
target.parents("ul").addClass("show-dropdown");
});
이부분이 페이지 이동시에 해당부분 열어주는 코드인데,
path 가 a태그의 href 와 동일하게 제대로 찍히는지 확인해보셔야 할거같습니다.
제 링크는 https://domain.com/board 이런식입니다.
위 코드와 뭔가 다른게 있는걸까요?
답변을 작성하시기 전에 로그인 해주세요.