嵌套的手风琴面板问题 [英] Problem with Nested accordian panel

问题描述

我想添加2个accodrian控件。



在每个控件中，我想显示3个手风琴面板（打开，关闭和正在进行中）。



我尝试过类似的东西。



但嵌套的手风琴面板不能正常工作。请帮助

I want to add 2 accodrian control.

In each control, I want to show 3 accordian panel(open,close and work-in-progress).

I have tried something like this.

But nested accordian panel is not working as I expect. Pls help

<div>
<asp1:ToolkitScriptManager ID="ToolkitScriptManager1"  runat="server">
</asp1:ToolkitScriptManager>
<asp1:Accordion ID="Accordion1"   
CssClass="accordion"  
HeaderCssClass="accordionHeader"  
HeaderSelectedCssClass="accordionHeaderSelected"  
ContentCssClass="accordionContent"   
 runat="server" Height="182px" Width="833px">
<Panes>  
<asp1:AccordionPane ID="AccordionPane1"  runat="server">  
<Header>Known Vulnerability</Header>  
<Content>
Displaying Known Vulnerability  
<asp1:AccordionPane ID="AccordionPane4"  runat="server" CssClass="accordion"  
HeaderCssClass="accordionHeader"  
HeaderSelectedCssClass="accordionHeaderSelected"  
ContentCssClass="accordionContent"   >  
<Header>Open - </Header>  
<Content>  
Displaying Open
</Content>  
</asp1:AccordionPane>  
</Content>  
</asp1:AccordionPane>  
<asp1:AccordionPane ID="AccordionPane2"  runat="server">  
<Header>Work In progress</Header>  
<Content>  
<asp:GridView ID="GridView2" runat="server" AllowSorting="True" AutoGenerateColumns="false" PageSize="5"
AllowPaging="true"  CssClass="ChildGrid" OnPageIndexChanging="Workinprogress" >
<Columns>
    <asp:BoundField ItemStyle-Width="85px" DataField="analysisId" HeaderText="Analysis Id" />
    <asp:BoundField ItemStyle-Width="55px" DataField="alertId" HeaderText="Alert Id" />
    <asp:BoundField ItemStyle-Width="150px" DataField="alertType" HeaderText="Alert Type" />
    <asp:BoundField ItemStyle-Width="110px" DataField="cveId" HeaderText="CVD-ID" />
    <asp:BoundField ItemStyle-Width="100px" DataField="status" HeaderText="Status" />
    <asp:BoundField ItemStyle-Width="170px" DataField="subStatus" HeaderText="Sub Status" />
    <asp:TemplateField HeaderText="Action" >
        <ItemTemplate>
                <asp:LinkButton ID="lnkAction" Width="100" runat="server" Autopostback="true" Text="Proceed Further" />
        </ItemTemplate>
    </asp:TemplateField>
        <asp:TemplateField HeaderText="Track Advisories" >
        <ItemTemplate>
        <table class="style1">
        <tr>
        <td align ="center">
                    <asp:Image ID="imgTrack" runat="server" ImageUrl="~/Images/TrackAdvisories.png" onmouseover="call(this)"/>
            <asp1:HoverMenuExtender ID="popUpPanel" PopupControlID="PopupMenu"  runat="server" TargetControlID="imgTrack"
            HoverCssClass="popupHover" PopupPosition="Left" OffsetX="0" OffsetY="0" PopDelay="50"/>
            </td>
            </tr>
            </table>
        </ItemTemplate>
    </asp:TemplateField>
</Columns>
</asp:GridView>
</Content>  
</asp1:AccordionPane>  
<asp1:AccordionPane ID="AccordionPane3"  runat="server">  
<Header>Closed</Header>  
<Content>  
<asp:GridView ID="GridView3" runat="server" AllowSorting="True" AutoGenerateColumns="false" PageSize="5"
AllowPaging="true" OnPageIndexChanging="open" CssClass="ChildGrid" EmptyDataText="No Data Found">
<EmptyDataTemplate>
<asp:image id="NoDataImage" imageurl="~/Images/NoData.png" alternatetext="No data" runat="server" Visible="true"/><br />
No data to display
</EmptyDataTemplate>
<Columns>
    <asp:BoundField ItemStyle-Width="80px" DataField="analysisId" HeaderText="Analysis Id" />
    <asp:BoundField ItemStyle-Width="52px" DataField="alertId" HeaderText="Alert Id" />
    <asp:BoundField ItemStyle-Width="130px" DataField="alertType" HeaderText="Alert Type" />
    <asp:BoundField ItemStyle-Width="110px" DataField="cveId" HeaderText="CVD-ID" />
    <asp:BoundField ItemStyle-Width="45px" DataField="status" HeaderText="Status" />
    <asp:BoundField ItemStyle-Width="130px" DataField="subStatus" HeaderText="Sub Status" />
    <asp:TemplateField HeaderText="Action" >
        <ItemTemplate>
                <asp:LinkButton ID="lnkAction"  ItemStyle-Width="150px" runat="server" Autopostback="true" Text="Proceed Further" />
        </ItemTemplate>
    </asp:TemplateField>
        <asp:TemplateField HeaderText="Track Advisories" >
        <ItemTemplate>
        <table class="style1">
        <tr>
        <td align ="center">
                   <asp:Image ID="imgTrack" runat="server" ImageUrl="~/Images/TrackAdvisories.png"/>
            <asp1:HoverMenuExtender ID="popUpPanel" PopupControlID="PopupMenu"  runat="server" TargetControlID="imgTrack"
            HoverCssClass="popupHover" PopupPosition="Left" OffsetX="0" OffsetY="0" PopDelay="50"/>
                                    
            </td>
            </tr>
            </table>
        </ItemTemplate>
    </asp:TemplateField>
</Columns>
</asp:GridView>
</Content>
</asp1:AccordionPane>  
</Panes>  
</asp1:Accordion>
</div>

推荐答案

<asp:Accordion

    ID="Accordion1"

    CssClass="accordion"

    HeaderCssClass="accordionHeader"

    HeaderSelectedCssClass="accordionHeaderSelected"

    ContentCssClass="accordionContent"

    runat="server">
<Panes>
    <asp:AccordionPane runat="server">
        <Header>Pane 1</Header>
        <Content>

        Pane 1 Content

        </Content>
    </asp:AccordionPane>
    <asp:AccordionPane ID="AccordionPane1" runat="server">
        <Header>Pane 2</Header>
        <Content>


        Pane 2 Content

        </Content>
    </asp:AccordionPane>
    <asp:AccordionPane ID="AccordionPane2" runat="server">
        <Header>Pane 3</Header>
        <Content>

        Pane 3 Content

        </Content>
    </asp:AccordionPane>
</Panes>
</asp:Accordion>

这篇关于嵌套的手风琴面板问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！