如何使用 <asp:button> 强制关闭 jQuery UI 手风琴 <DIV>？答案

【问题标题】：How to force close jQuery UI accordion <DIV> with <asp:button>?如何使用 <asp:button> 强制关闭 jQuery UI 手风琴 <DIV>？
【发布时间】：2012-05-01 23:26:46
【问题描述】：

我正在使用带有两个 div 的 jQuery UI 手风琴。第一个显示表单，第二个显示基于表单输入的数据。当用户单击表单中的提交按钮时，如何自动关闭第一个 div 并显示第二个？我假设我需要在按钮中使用“onclick”，但我不知道如何将它与手风琴联系起来。

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/jscript">
$(document).ready(function () {
$("#accordion").accordion();
});
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div id="accordion">
<a href="#">Criteria</a>
<div>
<asp:Button ID="Button_GetReport" runat="server" Text="View Report" />
</div>
<a href="#">Report</a>
<div>
A databound grid goes here.
</div>
</div>
</asp:Content>

如果我遗漏了什么，请告诉我。提前感谢您的帮助！

【问题讨论】：

标签： jquery asp.net vb.net visual-studio-2010 jquery-ui

【解决方案1】：

单击提交按钮将往返于服务器，因此 onclick 对您没有帮助。您可能想要输出手风琴是打开还是关闭。

一种方法是更改您的手风琴 div 以使类显示状态：

<div id="accordion" class="accordion-<%= accordion_state %>"> //open or closed

那么您的选择器将是：

$(document).ready(function () {
  $(".accordion_open").accordion();
  $(".accordion_closed").hide();
});

有关使用 ASP.NET 和手风琴控件的一些示例，请参阅 this article。

【讨论】：