如何在更改视图时保持 Bootstrap 面板 expanded/collapsed

Question

我有 3 个 Bootstrap 面板，当它们的 headers 被点击时 expand/collapse。但是，当更改为另一个路线 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 并使用 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");
    }

如何在更改视图时保持 Bootstrap 面板 expanded/collapsed

How to keep Bootstrap panel expanded/collapsed when changing view

css

twitter-bootstrap

angularjs

ngroute

angularjs-ng-route