twitter-bootstrap Bootstrap 手风琴防止在 asp.net 回发时崩溃
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24552674/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap accordion prevent collapse on postback in asp.net
提问by Ghost
I have a bootstrap accordion where i try to reopen the last opened pane on a postback as in if someone clicks a save button on my page. I found this solution: Retain Twitter Bootstrap Collapse state on Page refresh/Navigation
我有一个引导手风琴，我尝试在回发时重新打开最后打开的窗格，就像有人单击我页面上的保存按钮一样。我找到了这个解决方案：Retain Twitter Bootstrap Collapse state on Page refresh/Navigation
but am unable to comment on it since i don't have enough points as a user.
但我无法对此发表评论，因为我作为用户没有足够的积分。
For some reason i can't make the function work:
由于某种原因，我无法使该功能正常工作：
//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)
});
I'm trying to test it in FireBug but I never get to the line with var active. It stops at the line with $("#applicant-accordion).bind. I've tried changing the .bind to .on since my jQuery is version 1.7.2
我正在尝试在 FireBug 中对其进行测试，但我从未使用 var active 进行测试。它停在 $("#applicant-accordion).bind 行。我尝试将 .bind 更改为 .on，因为我的 jQuery 是 1.7.2 版
I'm at a loss and i hope you can guide me towards a solution. I am building it in ASP.NET.
我不知所措，希望您能指导我找到解决方案。我正在 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>
回答by Ghost
Just to post my solution:
只是发布我的解决方案：
Added a hiddenfield:
添加了一个隐藏字段：
<asp:HiddenField ID="hfAccordionIndex" runat="server" />
And the JavaScript at the bottom of the page to make sure the DOM has the elements:
以及页面底部的 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>
回答by Muthukumar
In general, whenever you want to retain a value after postback in ASP.NET there is a common approach.
通常，每当您想在 ASP.NET 中回发后保留值时，都有一种通用方法。
Store the value in an ASP.NET hidden field. In your case store the value of following activevariable in a hiddren field.
将值存储在 ASP.NET 隐藏字段中。在您的情况下，将以下active变量的值存储在 hiddren 字段中。
var active = $("#applicant-accordion .in").attr('id');
After post back due to the view state maintained by the ASP.NET, the hidden field will retain the value. You can then use this value at the page load to set the accordin.
由于 ASP.NET 维护的视图状态回发后，隐藏字段将保留该值。然后，您可以在页面加载时使用此值来设置一致。
$(document).ready(function () {
var last = // Get value from the hidden field
if (last != null) {
// Set the accordin values.
}
});
回答by viom jeet
**Updated code for make accordion run able with current tab active. **
**更新了使手风琴能够在当前选项卡处于活动状态的情况下运行的代码。**
<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>
