자식 링크 페이지에있을 때 부모 링크의 활성 클래스 트리거

Question

예를 들어 https://stackoverflow.com/questions/ 페이지에있을 때 클래스에 부모 메뉴 항목을 넣으려면 자바 스크립트 코드가 있어야합니다. 하지만 하위 메뉴/하위 메뉴 항목 인 https://stackoverflow.com/questions/ask/에있을 때 상위 메뉴 항목을 클래스 활성으로 설정하고 싶다면 어떻게 할 수 있는지 알고 싶습니까?

예이 페이지의 내용은 https://stackoverflow.com/questions/ask/입니다./과 같은 URL을 얻는 방법은/질문하지 않아도 부모님 메뉴 항목 (질문)을 가질 수 있습니다. (질문) 인 질문의 아이 페이지.

아래 코드는 내가 https://stackoverflow.com/questions/에있는 경우에만 작동하지만 하위 페이지 https://stackoverflow.com/questions/ask/에있는 경우 상위 링크 (https://stackoverflow.com/questions/)는 활성 클래스로 변경되지 않습니다.

<ul class="nav navbar-nav"> 
      <li><a href="/"><h5>Home</h5></a></li> 
      <li class="dropdown"> 
       <a href="/online/" class="dropdown-toggle " role="button" aria-expanded="false"><h5>Online<span class="caret"></span></h5></a> 
       <ul class="dropdown-menu" role="menu"> 
        <li><a href="/online/history/">History</a></li> 
        <li><a href="/online/science/">Science</a></li> 
        <li><a href="/online/math">Mathematics</a></li> 
        <li><a href="/online/english/">English</a></li> 
       </ul> 
      </li> 
     </ul> 



<script type="text/javascript"> 

var url = window.parent.location.href; 
     $('ul.nav a[href="'+ url +'"]').parent().addClass('active'); 

     $('ul.nav a').filter(function() { 
     return this.href == url; 
     }).parent().addClass('active'); 



</script> 

Answer 1

parents()을 사용하면 부모와 모든 조상을 일치시킬 수 있습니다. 선택기 인수를 지정하여 li 태그로만 제한하십시오.

$('ul.nav a').filter(function() { 
    return this.href == url; 
}).parents('li').addClass('active');