手风琴：即使图像路径正确，箭头图像也不显示

Question

我希望将箭头折叠的图像显示在手风琴标题之前，并且当单击并展开手风琴标题时，箭头折叠的图像应更改为箭头展开的图像。我在下面做错了什么？此外，图像路径都是正确的。我检查了很多次。

我的手风琴：-

<cc1:Accordion ID="Accordion1" runat="server" FadeTransitions="true"  Visible="true" AutoSize="None"SelectedIndex="0" RequireOpenedPane="false"  TransitionDuration="250" 
HeaderCssClass="accordionHeader toggler" ContentCssClass="accordionContent expanded toggler">
                <HeaderTemplate>

                    <b style="color: Black">

                        <%#Eval("Ques")%>
                    </b>

                </HeaderTemplate>


                <ContentTemplate>
                <p> <%#DataBinder.Eval(Container.DataItem, "QuesAns")%></p>

                </ContentTemplate>
            </cc1:Accordion>

css

是我给 CSS 类的名称不正确还是什么？？？？

@denis..它仍然不显示图像..在 Firebug 中也找不到图像

Answer 1

首先，我建议查看Accordion 示例页面，该页面列出了所有可用属性及其描述。您会注意到 Accordion 还公开了 HeaderSelectedCssClass 属性 - 这是您为折叠状态设置样式的地方。所以，你可以像这样重写你的标记：

<cc1:Accordion ID="Accordion1" runat="server" FadeTransitions="true" Visible="true" AutoSize="None" SelectedIndex="0" RequireOpenedPane="false" TransitionDuration="250" 
     HeaderCssClass="accordionHeader toggler" 
     HeaderSelectedCssClass="accordionHeader toggler-expanded" 
     ContentCssClass="accordionContent"> 
        <HeaderTemplate> 

            <b style="color: Black">    
                <%#Eval("Ques")%> 
            </b> 

        </HeaderTemplate>        

        <ContentTemplate> 
            <p> <%#DataBinder.Eval(Container.DataItem, "QuesAns")%></p>        
        </ContentTemplate> 
 </cc1:Accordion> 

对于 CSS：

<style type="text/css">
    .accordionHeader {         
        cursor: pointer;         
        margin-top: 10px;         
        margin-left: 20px;
    }         

    .toggler {
        background: url('../../images/arrow-collapsed.png') no-repeat left center transparent;
    }         

    .toggler-expanded {
        background: url('../../images/arrow-expanded.png') no-repeat left center transparent;
    }

    .accordionContent { 
         margin-top: 10px;         
         margin-left: 20px;         
    }   
  </style>

请删除所有这些脚本。