当复选框触发时，我的 ASP.NET Accordion 不会以动画方式显示面板更改

Question

我的手风琴面板标记：

<ajaxToolkit:Accordion 
ID="MyAccordion"
runat="server"
SelectedIndex="0"
HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected"
ContentCssClass="accordionContent"
AutoSize="None"
FadeTransitions="true"
TransitionDuration="250"
FramesPerSecond="40"
RequireOpenedPane="false"
SuppressHeaderPostbacks="true">
<Panes>
    <ajaxToolkit:AccordionPane ID="AccordionPane10" runat="server">
        <Header>BBBBBBBBBB</Header>
        <Content>
        FFFFFFFF:<br /><br />
        <table cellpadding="0" cellspacing="0" width="750"><tr><td width="450" class="verificationtdleft">
            <asp:Image ID="step4_originalimage" runat="server" AlternateText="" />
        </td><td width="300">
            <asp:CheckBox ID="CB_Verification0" runat="server" AutoPostBack="true" /> Verify
        </td></tr>
        </table>
        </Content>

    </ajaxToolkit:AccordionPane>

    <ajaxToolkit:AccordionPane ID="AccordionPane11" runat="server">
        <Header>GGGGGGGGG</Header>
        <Content>
        HHHHHHHHHH:<br /><br />
            <table cellpadding="0" cellspacing="0" width="750"><tr><td width="450" class="verificationtdleft">
                <asp:Image ID="step4_image_thumbnail" runat="server" AlternateText="" />
            </td><td width="300">
                <asp:CheckBox ID="CB_Verification1" runat="server" AutoPostBack="true" /> Verify
            </td></tr>
            </table>
        </Content>
    </ajaxToolkit:AccordionPane>
</Panes>            

以下是我处理复选框检查的方法：

Private Sub CB_Verification0_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles CB_Verification0.CheckedChanged
    MyAccordion.SelectedIndex = 1
End Sub

我使面板正确更改，只是它们不像我单击标题时那样动画。当我单击复选框来更改面板时，面板会立即消失，新面板会立即出现，但我希望它能像单击标题一样进行动画处理。有没有办法在强制更改可见面板时导致动画发生？

Answer 1

你可以这样做..所有客户端，你的问题是，当它回发时，它会刷新回第一个..所以你必须关闭自动回发..这是有效的示例..

<script language="javascript" type="text/javascript">

    function toggle(id) {
        var accordion = $get("<%= MyAccordion.ClientID%>");
        accordion.AccordionBehavior.set_SelectedIndex(id);

    }
</script>

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <ajaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader"
        HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent"
        AutoSize="None" FadeTransitions="true" TransitionDuration="250" FramesPerSecond="40"
        RequireOpenedPane="false" SuppressHeaderPostbacks="true">
        <Panes>
            <ajaxToolkit:AccordionPane ID="AccordionPane10" runat="server">
                <Header>
                    BBBBBBBBBB</Header>
                <Content>
                    FFFFFFFF:<br />
                    <br />
                    <table cellpadding="0" cellspacing="0" width="750">
                        <tr>
                            <td width="450" class="verificationtdleft">
                                <asp:Image ID="step4_originalimage" runat="server" AlternateText="" />
                            </td>
                            <td width="300">
                                <input id="Checkbox1" type="checkbox" onclick="javascript:toggle(1);" />
                                Verify
                            </td>
                        </tr>
                    </table>
                </Content>
            </ajaxToolkit:AccordionPane>
            <ajaxToolkit:AccordionPane ID="AccordionPane11" runat="server">
                <Header>
                    GGGGGGGGG</Header>
                <Content>
                    HHHHHHHHHH:<br />
                    <br />
                    <table cellpadding="0" cellspacing="0" width="750">
                        <tr>
                            <td width="450" class="verificationtdleft">
                                <asp:Image ID="step4_image_thumbnail" runat="server" AlternateText="" />
                            </td>
                            <td width="300">
                                <input id="Checkbox2" type="checkbox" onclick="javascript:toggle(0);" />
                                Verify
                            </td>
                        </tr>
                    </table>
                </Content>
            </ajaxToolkit:AccordionPane>
        </Panes>
    </ajaxToolkit:Accordion>

Answer 2

这是因为您正在更改服务器端的面板，因此页面会在面板已展开的情况下发送到客户端。您可以在回发上注册一个脚本来触发客户端的更改。

看看这个博客