CollapsiblePanelExtender：我可以从客户端javascript启动崩溃/扩展吗？ （AJAX控件工具包）

Question

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

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

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

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

似乎这不是AJAX Control Toolkit人们想到的用例，但我想我会检查。

Answer 1

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

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

我修改了我的页面上的转发器，以便BehaviorID可以预测，这些行：

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

这会导致名为collapsebehavior1，collapsebehavior2，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 2

在Image / button

的OnClick事件中编写以下代码

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

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

希望这有帮助！

Answer 3

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

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