부트 스트랩 스테이 아코디언 열린 페이지 새로 고침

Question

페이지를 새로 고침 (항목 중 하나를 클릭)하면 어떻게 아코디언과 아코디언을 열어 둘 수 있습니까? 페이지를 새로 고침 할 때 열려있는 항목을 저장하는 자체 함수를 작성해야합니까? 아니면 부트 스트랩의 javascript에 내장 된 항목을 사용할 수도 있습니다.

<div id="MainMenu"> 
<div class="list-group"> 
    <a href="#menu0" class="list-group-item" data-toggle="collapse" data-parent="#MainMenu">Holz</a> 
    <div id="menu0" class="collapse"> 
     <a href="/products/index/11" class="list-group-subitem">A</a> 
     <a href="/products/index/12" class="list-group-subitem">B</a> 
     <a href="/products/index/13" class="list-group-subitem">C</a> 
     <a href="/products/index/14" class="list-group-subitem">D</a> 
     <a href="#menu0_1" class="list-group-subitem" data-toggle="collapse" data-parent="#MainMenu">E</a> 
     <div id="menu0_1" class="collapse"> 
      <a href="/products/index/15" class="list-group-subitem">E1</a> 
      <a href="/products/index/16" class="list-group-subitem">E2</a> 
     </div> 
    </div> 
</div> 

Answer 1

당신은 로컬 저장 또는 쿠키를 사용할 수 있습니다. http://getbootstrap.com/javascript/#collapse-usage, 예를 들면 :

$(document).ready(function() { 
    $('a').click(function() { 
     //store the id of the collapsible element 
     localStorage.setItem('collapseItem', $(this).attr('href')); 
    }); 

    var collapseItem = localStorage.getItem('collapseItem'); 
    if (collapseItem) { 
     $(collapseItem).collapse('show') 
    } 
}) 

FIDDLE

당신이 부트 스트랩 붕괴 이벤트를 사용할 수있는 코드를 개선하려면 다음은 로컬 저장 한 예이다

$('#myCollapsible').on('show.bs.collapse', function() { 
    // store the id of the collapsible element 
    //.... 
}) 

같은 전략은 쿠키와 함께 사용될 수있다 : https://github.com/carhartl/jquery-cookie