Javascript asp.net中的引导式手风琴防止回发时崩溃

我有一个引导式手风琴，我尝试在回发时重新打开最后打开的窗格，就像有人单击我页面上的保存按钮一样。我找到了这个解决方案：

但我无法对此发表评论，因为作为一名用户，我没有足够的分数

由于某些原因，我无法使该功能正常工作：

//when a group is shown, save it as the active accordion group
$("#applicant-accordion").bind('shown', function () {
    var active = $("#applicant-accordion .in").attr('id');
    $.cookie('activeAccordionGroup', active)
});

我试图在FireBug中测试它，但我从来没有在var处于活动状态的情况下进行测试。它停在$（“#申请人手风琴）.bind行。我已经尝试将.bind更改为.on，因为我的jQuery版本是1.7.2

我不知所措，希望您能指导我找到解决方案。我正在ASP.NET中构建它

<script src="../Scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script src="../Scripts/bootstrap/js/bootstrap.js" type="text/javascript" />
<link href="../Scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js" />

<script type="text/javascript">
    $(document).ready(function () {
        var last = $.cookie('activeAccordionGroup');
        if (last != null) {
            //remove default collapse settings
            $("#applicant-accordion .panel-collapse").removeClass('in');
            //show the account_last visible group
            $("#" + last).addClass("in");
        }
    });

    //when a group is shown, save it as the active accordion group
    $("#applicant-accordion").on('shown', function () {
        var active = $("#applicant-accordion .in").attr('id');
        $.cookie('activeAccordionGroup', active)
    });

</script>

    <div class="accordion" id="applicant-accordion">
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#uInfo">Applicant information</a>
            </div>
            <div id="uInfo" class="accordion-body collapse in">
                <div class="accordion-inner">
                </div>
            </div>
        </div>

        <asp:Panel Visible="false" runat="server" ID="assistancePanel">
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#meetgreet">Accommodation and Meet & Greet information</a>
                </div>
                <div id="meetgreet" class="accordion-body collapse">
                    <div class="accordion-inner">
                    </div>
                </div>
            </div>
        </asp:Panel>

        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#application">Application, documents & options</a>
            </div>
            <div id="application" class="accordion-body collapse">
                <div class="accordion-inner">
                </div>
            </div>
        </div>

        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#comments">Comments</a>
            </div>
            <div id="comments" class="accordion-body collapse">
                <div class="accordion-inner">
                </div>
            </div>
        </div>

        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#changelog">Changelog</a>
            </div>
            <div id="changelog" class="accordion-body collapse">
                <div class="accordion-inner" runat="server" id="changelogItems">
                </div>
            </div>
        </div>
    </div>

$（文档）.ready（函数（）{
var last=$.cookie（'activeAccordionGroup'）；
if（last！=null）{
//删除默认折叠设置
$（“#申请人手风琴面板折叠”）.removeClass（'in'）；
//显示上次可见的组中的帐户
$（“#”+last）.addClass（“in”）；
}
});
//显示组时，将其另存为活动的手风琴组
$（“#申请人手风琴”）。在（'显示'，功能（）{
var active=$（“#申请人手风琴.in”）.attr（'id'）；
$.cookie（'activeAccordionGroup'，active）
});

通常，只要您想在ASP.NET中回发后保留值，都有一种常见的方法

将值存储在ASP.NET隐藏字段中。在您的情况下，将以下

active

变量的值存储在隐藏字段中

 var active = $("#applicant-accordion .in").attr('id');

由于ASP.NET维护的视图状态，回发后，隐藏字段将保留该值。然后，您可以在页面加载时使用该值来设置默认值

$(document).ready(function () {
        var last = // Get value from the hidden field
        if (last != null) {
            // Set the accordin values.
        }
    });

---

只需发布我的解决方案：

添加了一个隐藏字段：

<asp:HiddenField ID="hfAccordionIndex" runat="server" />

以及页面底部的JavaScript，以确保DOM具有以下元素：

<script type="text/javascript">
    $(document).ready(function () {
        var last = $('#<%= hfAccordionIndex.ClientID %>').val();
        if (last != null && last != "") {
            //remove default collapse settings
            $("#applicant-accordion .collapse").removeClass('in');
            //show the account_last visible group
            $("#" + last).collapse("show");
        }
    });

    //when a group is shown, save it as the active accordion group
    $("#applicant-accordion").on('shown', function () {
        var active = $("#applicant-accordion .in").attr('id');
        $('#<%= hfAccordionIndex.ClientID %>').val(active);
    });
</script>

$（文档）.ready（函数（）{
var last=$（'#'）.val（）；
如果（last！=null&&last！=“”）{
//删除默认折叠设置
$（“#申请人手风琴.collapse”）.removeClass（'in'）；
//显示上次可见的组中的帐户
$（“#”+最后一个）。折叠（“显示”）；
}
});
//显示组时，将其另存为活动的手风琴组
$（“#申请人手风琴”）。在（'显示'，功能（）{
var active=$（“#申请人手风琴.in”）.attr（'id'）；
$（'#'）.val（活动）；
});

**更新了使手风琴在当前选项卡处于活动状态时运行的代码**

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Header 1 </a></h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">Content 1</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Header 2 </a></h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">Content 2</div>
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Header 3 </a></h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">Content 3</div>
    </div>
  </div>

  <div class="form-group">
    <hr />
    <asp:Button ID="Button1" Text="Submit" runat="server" CssClass="btn btn-primary" />
    <asp:HiddenField ID="PaneName" runat="server" />
  </div>
</div>


<script type="text/javascript">
  $(function() {
    var paneName = $("[id*=PaneName]").val() != "" ? $("[id*=PaneName]").val() : "collapseOne";
    $("#accordion .collapse").removeClass("in");
    $("#" + paneName).addClass("in");
    $(".panel-heading a").click(function() {
      $("[id*=PaneName]").val($(this).attr("href").replace("#", ""));
    });
  });

</script>

内容1
内容2
内容3

$（函数（）{
var paneName=$（“[id*=paneName]”）。val（）！=”“？$（“[id*=paneName]”）。val（）：“collapseOne”；
$（“#accordion.collapse”）.removeClass（“in”）；
$（“#”+paneName）.addClass（“in”）；
$（“.panel heading a”）。单击（函数（）{
$（“[id*=PaneName]”.val（$（this.attr（“href”）.replace（“#”，”）；
});
});
代码>是的，我看到了。这个答案实际上让我想到DOM中的元素，所以我把脚本移到了页面的底部，这使它有效。我会考虑Hidfield方法。嗨，你可以检查我的答案：我也面临同样的问题。