如何在 HTM 文件中创建与可折叠面板扩展器等效的内容？答案

【问题标题】：How do I create an equivalent to the collapsible panel extender in HTM file?如何在 HTM 文件中创建与可折叠面板扩展器等效的内容？
【发布时间】：2012-07-26 13:14:21
【问题描述】：

我创建了一个带有工作可折叠面板的 asp.net 文件。我假设如果我获取客户端的源并将其复制到 HTM 文件中，它仍然可以工作 - 但它没有。

我所做的是“查看源代码”并将其全部复制到空白 HTM 文件中。除了可折叠面板之外，一切都在工作。

为什么？我可以修复它吗？

谢谢

【问题讨论】：

标签： javascript asp.net client-side collapsiblepanelextender

【解决方案1】：

您可以使用 jQueryUI 手风琴功能 http://jqueryui.com/accordion/

或 jQuery slideToggle() 函数问候内特

【讨论】：

【解决方案2】：

这就是为什么

我将尝试简短地解释，但必须使用假设。 ASP.NET 是一个在运行时编译的 Web 应用程序框架，这意味着您的页面从对象和控件转换为 html、css 和 javascript； Javascript (ScriptResource.axd) 已加密，您无法访问 htm 页面中的脚本。 Good Link about ScriptResource.axd

如何解决？

好消息是肯定的！ 假设您正在使用 AJAXToolKit（是的，这是一个很大的假设），您可以使用仅包含一个部分的 jQuery UI Accordion。我测试了两者，它们的工作方式相同。我希望这有帮助！ jQuery Accordion reference

使用 AJAX（可折叠面板）的 ASPX 示例：

<form id="form1" runat="server">
  <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <ajaxToolkit:CollapsiblePanelExtender runat="server" 
        TargetControlID="Panel1" 
        Collapsed="true"
        ExpandControlID="LinkButton1" 
        CollapseControlID="LinkButton1" />

    <asp:LinkButton ID="LinkButton1" runat="server">Panel</asp:LinkButton>
    <asp:Panel ID="Panel1" runat="server">
        This is a Test
    </asp:Panel>
  </div>
</form>

使用 jQuery（手风琴）的 HTM 示例：

<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $('#Panel1').hide();

        $('#pnlLink').click(function () {
            $(this).next().toggle();
            return false;
        }).next().hide();
    });

</script>
</head>
<body>
   <a id="pnlLink" href="#">Panel</a>
   <div id="Panel1">
    <div>
        This is a test</div>
    </div>
</body>

【讨论】：