我有3个Bootstrap面板，单击其标题时会展开/折叠。但是（例如用于更换时，另一条路线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>
通过调整此处找到的解决方案并使用sessionStorage代替$ .cookie来做到这一点。
$("#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");
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句