WordPress 형 사이드 바

Question

사이드 바에이 코드가 있습니다 (WordPress와 유사).

여러 부모 클래스가 있습니다 <li class="panel parent">. 부모 중 하나에는 Notes 수신 및 Notes 전송과 함께 하위 컨테이너가 있습니다. 현재 부모를 클릭하면 자식이 작동하고, 다른 부모를 선택하면 자식도 종료됩니다.

나는 부모와 자식을 모두 선택하기 위해 jQuery에서 addClass을 사용했습니다.

문제는 내가 페이지를 다시로드 할 때
이 addClass 부모에서 사라입니다. 내가 당신이 localStorage와 함께 작동하게 만들 수 있다고 생각하지만, 나는 그것을 어떻게 사용하는지 모른다.

나를 도와 줄 수 있습니까?
내 영어로 죄송합니다.

<div id="sidebar-wrapper"> 
    <div id="sidebar"> 
     <ul id="accordion" class="sidebar-menu grandparent"> 
      <li class="panel parent"> 
       <a data-toggle="collapse" data-parent="#accordion" data-target="#notes" href="#"> Vegetables </a> 
       <div id="notes" class="panel-collapse collapse"> 
        <!-- children --> 
        <ul class="children"> 
         <li><a href="#"> Potato </a></li> 
         <li><a href="#"> Tomato </a></li> 
         ... 
        </ul> 
       </div> 
      </li> 
      <li class="panel parent"> 
       <a data-toggle="collapse" data-parent="#accordion" data-target="#dummychild" href="#">Fruits</a> 
       <div id="dummychild" class="panel-collapse collapse"></div> <!-- dummy child --> 
      </li> 
      <li class="panel parent"> 
       <a data-toggle="collapse" data-parent="#accordion" data-target="#dummychild" href="#">Spices</a> 
       <div id="dummychild" class="panel-collapse collapse"></div> <!-- dummy child --> 
      </li> 
      ... 
     </ul> 
    </div 
</div> 

은 여기 내 jQuery를

$(document).ready(function() { 
    $('.grandparent').find('li a').click(function() { 
     $('.grandparent').find('li a').removeClass('sidebar-hght'); 
     $(this).addClass('sidebar-hght'); 
     $($(this).closest('li.parent').children()[0]).addClass('sidebar-hght'); 
    }); 
}); 

감사합니다.

Answer 1

OLD 답변

이

window.localStorage.setItem('OPEN', 'YES'); 

또는이

window.localStorage.setItem('OPEN', 'YES'); 

표시하거나 사이드 메뉴를 닫으려고하는 경우에 따라 간부 인 것이다. 는 그런 다음 jQuery를이

$(document).ready(function() { 
    $('.grandparent').find('li a').click(function() { 
     $('.grandparent').find('li a').removeClass('sidebar-hght'); 
     $(this).addClass('sidebar-hght'); 
     $($(this).closest('li.parent').children()[0]).addClass('sidebar-hght'); 
    }); 
    if(window.localStorage.getItem('OPEN') ==='YES') { 
     /* put here your code to add the class "addClass" to the parents you want */ 
    } 
}); 

EDIT처럼 될해야합니다 JSFIDDLE 기반으로하는 새로운 답변

이 자바 스크립트 코드는 마법

$(document).ready(function() { 
    $('.grandparent').find('li a').click(function() { 
     $('.grandparent').find('li a').removeClass('sidebar-hght'); 
     $(this).addClass('sidebar-hght'); 
     window.localStorage.setItem('OPEN', $(this).html()); 
     alert("set OPEN to "+$(this).html()); 
     $($(this).closest('li.parent').children()[0]).addClass('sidebar-hght'); 
    }); 
    if(window.localStorage.getItem('OPEN')) { 
     $('.grandparent').find('li a').each(function(index) { 
      if($(this).html() === window.localStorage.getItem('OPEN')) 
       $(this).click(); 
     }); 
    } 
});