Question

我有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>

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面板

1 个答案: