jquery - 在 AJAX 刷新后保持打开的可折叠面板打开

Question

我有一个带有部分 View 的主页。部分 View 每 60 秒刷新一次，我使用 AJAX 加载部分 View 。主页代码以及脚本和样式如下。

@{
ViewBag.Title = "Home Page";
}
@model SampleApp1.Models.Model1

<style>
.panel-heading .accordion-toggle:after {
/* symbol for "opening" panels */
font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
content: "\e114";    /* adjust as needed, taken from bootstrap.css */
float: right;        /* adjust as needed */
color: grey;         /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
/* symbol for "collapsed" panels */
content: "\e113";    /* adjust as needed, taken from bootstrap.css */
}

</style>

<div id="MainPage">
@Html.Partial("_PartialPage1")
</div>


<script>
window.setInterval(function () {
    loadView();
}, 60000
    );

function loadView() {
headerArray=$('#accordion').find('[aria-expanded=true]').closest('a');
bodyArray=$('#accordion').find($('.in'));
    var targetUrl = '/Home/GetIndex';
    $.ajax({
        url: targetUrl,
        type: 'GET',
        cache: true,
        async: true,
    }).done(function (partialViewResult) {
        $("#MainPage").html(partialViewResult);
jQuery.each(headerArray, function (index, item) {
    $(this).removeClass('collapsed');
    $(this).attr('aria-expanded=true');
    console.log($(this))
});
jQuery.each(bodyArray, function (index, item) {
    $(this).addClass('in');
    $(this).attr('aria-expanded=true');
    console.log($(this))
});

    });
}

局部 View 基本上是一组使用可折叠面板开发的选项卡。我正在尝试存储打开的面板，然后在屏幕刷新后将其加载为打开的面板。

<div class="panel-group" id="accordion">
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a class="accordion-toggle collapsed" data-toggle="collapse"  href="#collapseOne">
               @Model.Header1
            </a>
        </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
        <div class="panel-body">
            @Model.Tab1
        </div>
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a class="accordion-toggle collapsed" data-toggle="collapse"  href="#collapseTwo">
                @Model.Header2

            </a>
        </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
            @Model.Tab2
        </div>
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a class="accordion-toggle collapsed" data-toggle="collapse"  href="#collapseThree">
                @Model.Header3

            </a>
        </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
        <div class="panel-body">
            @Model.Tab3
        </div>
    </div>
</div>

我的脚本似乎不起作用，刷新后所有面板都会折叠。我错过了什么吗？还有其他方法吗？

编辑:在 AJAX 部分中添加代码没有帮助。当我从控制台调试时，选项卡一直打开，直到 loadView 函数为止，当控件返回到 60,000 时，它似乎崩溃了。

This question与我的问题非常相似，这也没有解决。

Answer 1

如下所示更改您的 loadView 函数以存储展开的面板 ID，然后在设置 html 后再次展开它。

function loadView() {
var headerArray = [];
$('#accordion .in').each(function() {
    headerArray.push(this.id);
});
var targetUrl = '/Home/GetIndex';
$.ajax({
    url: targetUrl,
    type: 'GET',
    cache: true,
    async: true,
}).done(function(partialViewResult) {
    $("#MainPage").html(partialViewResult);
    $.each(headerArray, function(index, item) {

        $("#" + item).collapse('show');
    });

});
}

检查更新的 fiddle here 。希望这对您有帮助。