我有一个bootstrap手风琴，我尝试重新打开回发上最后打开的窗格，就像有人点击我页面上的保存按钮一样。我找到了这个解决方案：Retain Twitter Bootstrap Collapse state on Page refresh/Navigation
但我无法发表评论，因为我没有足够的积分作为用户。
出于某种原因，我无法使功能发挥作用：
//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 active的行。它停在$（＆＃34; #applied-accordion）.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>
答案 0 :(得分：4)
发布我的解决方案：
添加了隐藏字段：
<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>
答案 1 :(得分：3)
通常，只要您想在ASP.NET中回发后保留值，就会有一种常见的方法。
将值存储在ASP.NET隐藏字段中。在您的情况下，将以下active变量的值存储在hiddren字段中。
var active = $("#applicant-accordion .in").attr('id');
由于ASP.NET维护的视图状态回发后，隐藏字段将保留该值。然后，您可以在页面加载时使用此值来设置accordin。
$(document).ready(function () {
var last = // Get value from the hidden field
if (last != null) {
// Set the accordin values.
}
});
答案 2 :(得分：1)
**更新了make accordion run的代码，当前标签处于活动状态。 **
<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>