메뉴 active 상태 유지하는데 문제가 있습니다.

메뉴 active 상태 유지하는데 문제가 있습니다.

QA

메뉴 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 와 동일하게 제대로 찍히는지 확인해보셔야 할거같습니다. 

 

답변을 작성하시기 전에 로그인 해주세요.
전체 1,096
QA 내용 검색
filter #html ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT