如何使用JQuery折叠Ajax Control Toolkit CollapsiblePanelExtender？

Question

我有以下ASP.NET代码：

<div id="pnlFiltros" class="card">
    <asp:Panel ID="pnlFiltrosHeader" runat="server" CssClass="card-header bg-verdepetrobras text-white">
        Filtros (<asp:Label ID="lblTextFiltros" runat="server" />)
    </asp:Panel>
    <asp:Panel ID="pnlFiltrosContent" runat="server" CssClass="card-body">
        <div class="form-row">
            <div class="form-group col-md-6">
                <label>Chave / Nome</label>
                <asp:TextBox ID="txtChaveNome" runat="server" CssClass="form-control" />
            </div>
        </div>
        <div class="form-row">
            <div class="form-group col-md-2">
                <asp:Button ID="btPesquisar" runat="server" CssClass="btn btn-primary" Text="Pesquisar" OnClick="btPesquisar_Click" />
            </div>
        </div>
    </asp:Panel>
</div>

<ajaxToolkit:CollapsiblePanelExtender ID="cpExtFiltros" runat="server" TargetControlID="pnlFiltrosContent" CollapseControlID="pnlFiltrosHeader" ExpandControlID="pnlFiltrosHeader"
    Collapsed="false" TextLabelID="lblTextFiltros" CollapsedText="Clique para exibir..." ExpandedText="Clique para esconder..."
    CollapsedSize="0"></ajaxToolkit:CollapsiblePanelExtender>

如何使用JQuery折叠Ajax控件工具包CollapsiblePanelExtender？

Answer 1

我的解决方法是达到“ pnlFiltrosContent”的高度。如果值为0px，则面板会折叠。

            if ($('#<%=pnlPerfilContent.ClientID%>').css("height") == "0px")
                alert("Is collapsed");

Answer 2

通过给定的行为ID可以访问的功能很少

<ajaxToolkit:CollapsiblePanelExtender ID="LimitedByTypePanelExtender" runat="server" TargetControlID="LimitedByTypePanel" BehaviorID="bhvLimitedByType" Collapsed="true">
</ajaxToolkit:CollapsiblePanelExtender>

如果您在chrome控制台中检查对象$find('bhvLimitedByType')，则可以在原型中看到以下内容和更多方法

因此，根据此，您可以用来检查面板是否折叠。

var isLimitedByCollapsed = $find('bhvLimitedByType').get_Collapsed();