ASP.NET AJAX 控件工具包中的 CollapsiblePanel 控件扩展了一个面板，并为其提供了折叠其内容并再次展开它的功能。 这两个操作也可以从自定义 JavaScript 代码触发。
概述
ASP.NET AJAX 控件工具包中的 CollapsiblePanel 控件扩展了一个面板，并为其提供了折叠其内容并再次展开它的功能。 这两个操作也可以从自定义 JavaScript 代码触发。
步骤
首先，创建一个新的 ASP.NET 页，并在 ScriptManager 一个 <form> 元素中包含 。 这会加载 Control Toolkit 所需的 ASP.NET AJAX 库：
<asp:ScriptManager ID="asm" runat="server" />
然后，创建一个包含一些文本的面板，以便可以看到折叠/展开效果：
<asp:Panel ID="Panel1" CssClass="panelClass" runat="server">
ASP.NET AJAX is a free framework for quickly creating a new generation of more
efficient, more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of more
efficient, more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of more
efficient, more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
</asp:Panel>
如你所看到的，面板引用了一个 CSS 类，该类在此处 (，基本上定义了背景色和面板的宽度) ：
<style type="text/css">
.panelClass {background-color: lime; width: 300px;}
</style>
控件 CollapsiblePanelExtender 需要 属性， TargetControlID 以便工具包知道在请求时折叠或展开哪个面板：
<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="server"
TargetControlID="Panel1" />
遗憾的是，扩展程序当前不公开用于折叠或扩展面板的特定 API，但某些未记录的方法会这样做。 首先，向页面添加三个 HTML 按钮，然后触发客户端 JavaScript 折叠或展开面板的内容：
<input type="button" id="Button1" runat="server" value="Open" onclick="doOpen();" />
<input type="button" id="Button2" runat="server" value="Close" onclick="doClose();" />
<input type="button" id="Button3" runat="server" value="Toggle" onclick="doToggle();" />
在以) 开头 <script type="text/javascript"> 的客户端 JavaScript 代码 (， $find() 需要使用 方法来访问 CollapsiblePanelExtender。
$find("cpe") 将返回对它的引用。 从那里开始，特定方法将解决手头的任务。
打开 (展开) 面板的方法称为 _doOpen();以下代码实现 doOpen() 在单击第一个按钮时调用的函数：
function doOpen()
{
$find("cpe")._doOpen();
}
若要关闭或折叠面板， _doClose() 需要执行 方法。 因此，当用户单击第二个按钮时，将调用以下 JavaScript 代码：
function doClose()
{
$find("cpe")._doClose();
}
第三个按钮切换面板的状态：从折叠到展开，反之亦然。
CollapsiblePanelExtender公开方法，toggle()该方法正是这样做的： 反转面板的状态。 但是，还有另一种方法 (方法) 在内部使用 toggle() ： get_Collapsed() 的 CollapsiblePanelExtender() 方法告诉我们面板是否折叠。 根据此函数的返回值，面板随后会展开 (方法) _doOpen() 或折叠 (_doClose()) 方法：
function doToggle()
{
var cpe = $find("cpe");
//cpe._toggle();
if (cpe.get_Collapsed()) {
cpe._doOpen();
} else {
cpe._doClose();
}
}
第三个按钮更改面板的状态：从折叠到展开并返回 (单击以查看全尺寸图像)
