2016-07-12 10 views
2

3つのブートストラップパネルがあり、ヘッダがクリックされると展開/折りたたまれます。 (ルートとして/cars/details/:idid=CarModel2:id=CarModel1用など)、別のルート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> 

答えて

0

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"); 
    } 
関連する問題