뷰를 변경하면 부트 스트랩 패널을 확장/축소 된 상태로 유지

Question

머리글을 클릭하면 확장/축소되는 3 개의 부트 스트랩 패널이 있습니다. 그러나 다른 경로 ID로 변경하는 경우 (예 : :id=CarModel1 ~ id=CarModel2의 경우 /cars/details/:id) 경로를 사용하여 사용자가 패널을 뒤죽박죽 한 상태에서 이전 ID와 동일한 상태로 유지하려고합니다. 보기를 변경하면 즉시 다른 세부 정보가 표시됩니다. 패널 상태를 유지하려면 어떻게해야합니까? 제발, 내가 ngRoute가 아닌 ui-Router를 사용하고 있음을 명심하십시오.

샘플 패널 :

<div id="details"> 
    <div class="panel-heading detailsPanel"> 
     <a data-toggle="collapse" data-parent="#details" data-target="#collapseDetailsPanel"> 
      <h4>Additional Details</h4> 
     </a> 
    </div> 
    <div id="collapseDetailsPanel" class="panel-collapse collapse"> 
     <div class="panel-body"> 
      <div>Lorem Ipsum</div> 
     </div> 
    </div> 
</div> 

Answer 1

solution found here 적응 및 $ .cookie 대신 sessionStorage를 사용하여 그것을 할 수 있었다.

$("#details").on('shown.bs.collapse', function() { 
     var activeDetails = $("#details .in").attr('id'); 
     sessionStorage.setItem('activeDetailsGroup', activeDetails); 
    }); 
    $("#details").on('hidden.bs.collapse', function() { 
     sessionStorage.setItem('activeDetailsGroup', "inactive"); 
    }); 
    var lastDetails = sessionStorage.getItem('activeDetailsGroup'); 
    if (lastDetails !== "inactive") { 
     //remove default collapse settings 
     $("#details .panel-collapse").removeClass('in'); 
     //show the account_last visible group 
     $("#" + lastDetails).addClass("in"); 
    }