CollapsiblePanelExtender：我可以从客户端 JavaScript 启动折叠/展开吗？ （AJAX控制工具包）

Question

CollapsiblePanelExtender 似乎主要设计用于响应用户鼠标事件折叠/展开内容。 是否还有一种好方法可以让扩展器折叠/展开内容以响应客户端 JavaScript？

在我的特定情况下，我在页面上有许多 CollapsiblePanelExtender（及其相应的面板），我想知道是否可以通过严格在客户端执行类似的操作来实现“展开所有面板”按钮：

for each CollapsiblePanelExtender on this page, call somethingOrOther(extender)

我可以如果我进行了完整的回发，则在服务器端实现此逻辑，但我的页面需要很长时间才能加载，因此这似乎不会提供非常流畅的用户体验。 因此我对扩展/折叠客户端感兴趣。

看起来这不是 AJAX Control Toolkit 人们想到的用例，但我想我应该检查一下。

Answer 1

在 Image/button 的 OnClick 事件中编写以下代码

<asp:Image ID="img1" runat="server" OnClick="ExpandCollapse()"/>  

function ExpandCollapse() {
    $find("collapsibleBehavior1").set_Collapsed(true);
    $find("collapsibleBehavior2").set_Collapsed(true);
}

希望这会有所帮助！

Answer 2

我现在有一个部分有效的解决方案。

我听从了 Ian 的建议并浏览了工具包源代码。 在 CollapsiblePanelBehavior.debug.js 中，您可以看到 expandPanel() 显然是作为该行为的公共接口的一部分。 还有一个get_Collapsed()。 在 javascript 中访问这些行为的关键似乎是在 ASP.NET 中的 CollapsiblePanelExtender 标记上设置 BehaviorID 属性。

我修改了页面上的转发器，以便 BehaviorID 是可预测的，大致如下：

<ajaxToolkit:CollapsiblePanelExtender 
    BehaviorID="<%#'collapsebehavior'+DataBinder.Eval(Container.DataItem,'id')%>"
    ID="CollapsiblePanelExtender" runat="server" />

这会产生名为 collapsebehavior1、collapsebehavior2、< code>collapsebehavior3 等。

完成此操作后，我可以展开客户端上的所有可折叠面板，如下所示：

function expandAll() {
    var i = 0;
    while (true) {
        i++;
        var name = 'collapsebehavior' + i;
        var theBehavior = $find(name);
        if (theBehavior) {
            var isCollapsed = theBehavior.get_Collapsed();
            if (isCollapsed) {
                theBehavior.expandPanel();
            }             
        } else {
            // No more more panels to examine
            break;
        }
    }
}

我确信在这样的循环中使用 $find确实效率很低，但这就是我到目前为止所拥有的。

此外，由于某种原因，它无法在 Firefox 上运行。 （在 FF 上，只有第一个元素展开，然后 Control Toolkit 代码中出现 Javascript 错误。）

对于所有 JavaScript 专家来说，这一切都显得极其丑陋。 也许我稍后会把事情清理干净，或者你可以帮我。

Answer 3

您还可以仅切换面板以在折叠/展开状态之间切换：

    function toggle() {
        var MenuCollapser = $find("name");
        MenuCollapser.togglePanel();
    }