테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

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

모제코 4년 전 조회 3,035
답변 2
목록

안녕하세요. 현재 아래의 코드를 메뉴에 적용해서 사이트를 만들어보고 있습니다. https://codepen.io/piyushpd/pen/eYWWeNL" target="_blank">https://codepen.io/piyushpd/pen/eYWWeNL 코드에는 클릭된 ul이나 li에 대한 active 상태를 유지하는 코드가 있는 것 같은데 정작 다른 페이지로 가거나 리로드하면 다 초기화 되어 버립니다. 메뉴를 계속 수정해야해서 menu.php로 만들고 테마의 head.sub.php인클루드 했기 때문일까요? 아니면 아래와 같은 제 코드에 문제가 있는걸까요? 고견주시면 큰 도움이 될 것 같습니다. 감사합니다.

 

</p>

<p><code><</code><code>script</code><code>></code></p>

<p><code>// -------multilevel-accordian-menu---------</code></p>

<p><code>$(document).ready(function() {</code></p>

<p><code>    </code><code>$("#accordian a").click(function() {</code></p>

<p><code>        </code><code>var link = $(this);</code></p>

<p><code>        </code><code>var closest_ul = link.closest("ul");</code></p>

<p><code>        </code><code>var parallel_active_links = closest_ul.find(".active")</code></p>

<p><code>        </code><code>var closest_li = link.closest("li");</code></p>

<p><code>        </code><code>var link_status = closest_li.hasClass("active");</code></p>

<p><code>        </code><code>var count = 0;</code></p>

<p> </p>

<p><code>        </code><code>closest_ul.find("ul").slideUp(function() {</code></p>

<p><code>            </code><code>if (++count == closest_ul.find("ul").length){</code></p>

<p><code>                </code><code>parallel_active_links.removeClass("active");</code></p>

<p><code>                </code><code>parallel_active_links.children("ul").removeClass("show-dropdown");</code></p>

<p><code>            </code><code>}</code></p>

<p><code>        </code><code>});</code></p>

<p> </p>

<p><code>        </code><code>if (!link_status) {</code></p>

<p><code>            </code><code>closest_li.children("ul").slideDown().addClass("show-dropdown");</code></p>

<p><code>            </code><code>closest_li.parent().parent("li.active").find('ul').find("li.active").removeClass("active");</code></p>

<p><code>            </code><code>link.parent().addClass("active");</code></p>

<p><code>        </code><code>}</code></p>

<p><code>    </code><code>})</code></p>

<p><code>});</code></p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

<p><code>// --------for-active-class-on-other-page-----------</code></p>

<p><code>jQuery(document).ready(function($){</code></p>

<p><code>    </code><code>// Get current path and find target link</code></p>

<p><code>    </code><code>var path = window.location.pathname.split("/").pop();</code></p>

<p><code>  </code> </p>

<p><code>    </code><code>// Account for home page with empty path</code></p>

<p><code>    </code><code>if ( path == '' ) {</code></p>

<p><code>      </code><code>path = 'index.html';</code></p>

<p><code>    </code><code>}</code></p>

<p><code>     </code> </p>

<p><code>    </code><code>var target = $('#accordian li a[href="'+path+'"]');</code></p>

<p><code>    </code><code>// Add active class to target link</code></p>

<p><code>    </code><code>target.parents("li").addClass('active');</code></p>

<p><code>    </code><code>target.parents("ul").addClass("show-dropdown");</code></p>

<p><code>});</code></p>

<p><code></</code><code>script</code><code>></code></p>

<p> </p>

<p> </p>

<p><code><</code><code>div</code> <code>id</code><code>=</code><code>"accordian"</code><code>></code></p>

<p><code>            </code><code><</code><code>ul</code> <code>class</code><code>=</code><code>"show-dropdown"</code><code>></code></p>

<p><code>        </code><code><</code><code>li</code> <code>class</code><code>=</code><code>"solo"</code><code>></code></p>

<p><code>                    </code><code>주요테스트</code></p>

<p><code>                </code><code></</code><code>li</code><code>></code></p>

<p><code>                </code><code><</code><code>li</code> <code>class</code><code>=</code><code>"active"</code><code>></code></p>

<p><code>                    </code><code><</code><code>a</code> <code>href</code><code>=</code><code>"javascript:void(0);"</code><code>><</code><code>i</code> <code>class</code><code>=</code><code>"fas fa-car-alt"</code> <code>style</code><code>=</code><code>"margin-right:5px"</code><code>></</code><code>i</code><code>>테스트그룹</</code><code>a</code><code>></code></p>

<p><code>                    </code><code><</code><code>ul</code> <code>class</code><code>=</code><code>"show-dropdown"</code><code>></code></p>

<p><code>                        </code><code><</code><code>li</code><code>></code></p>

<p><code>                            </code><code><</code><code>a</code> <code>href</code><code>=</code><code>"javascript:void(0);"</code><code>><</code><code>img</code> <code>src=../../logo/test.png> 테스트</</code><code>a</code><code>></code></p>

<p><code>                            </code><code><</code><code>ul</code><code>></code></p>

<p><code>                                </code><code><</code><code>li</code><code>><</code><code>a</code> <code>href</code><code>=</code><code>"/test1"</code><code>>테스트1</</code><code>a</code><code>></</code><code>li</code><code>></code></p>

<p><code>                                </code><code><</code><code>li</code><code>><</code><code>a</code> <code>href</code><code>=</code><code>"/test2"</code><code>>테스트2</</code><code>a</code><code>></</code><code>li</code><code>></code></p>

<p><code>                                </code><code><</code><code>li</code><code>><</code><code>a</code> <code>href</code><code>=</code><code>"/test3"</code><code>>테스트3</</code><code>a</code><code>></</code><code>li</code><code>></code></p>

<p><code>           </code> </p>

<p><code>                            </code><code></</code><code>ul</code><code>></code></p>

<p><code>                        </code><code></</code><code>li</code><code>></code></p>

<p><code>          </code><code></</code><code>ul</code><code>></code></p>

<p><code>        </code><code></</code><code>li</code><code>></code></p>

<p><code>      </code><code></</code><code>ul</code><code>></code></p>

<p><code></</code><code>div</code><code>></code></p>

<p><code>

#그누보드5
댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
넓

1. 다른 페이지로 이동시 active 상태를 유지하려면 링크시에 고유키 또는 고유 번호를 넘겨서 

  class="active" 처럼 프로그램 처리해주시면 됩니다

 

2. 리로드시 (아무 코드값이없고 해당 메뉴 클릭 후 (show-dropdown 상태 가 활성화 된 상황에서))

   펼쳐진 대로 유지하려면

    위 스크립트 코드에서 show-dropdown 을 add 할때 cookies 를 생성시켜서 cookie 가 있으면 활성화 시키도록 코드를 추가하셔야 합니다

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

d
dev2lgb
4년 전

</p>

<pre>
<code>// --------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");
});</code></pre>

<p>

이부분이 페이지 이동시에 해당부분 열어주는 코드인데, 

path 가 a태그의 href 와 동일하게 제대로 찍히는지 확인해보셔야 할거같습니다. 

 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�
모제코
4년 전
제 링크는 https://domain.com/board 이런식입니다.
위 코드와 뭔가 다른게 있는걸까요?

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인