选择折叠选项卡时切换子元素的类

Question

我正在努力想出一种方法来切换位于Ajax Accordion header中的标记的css类。

我希望标头中span标记的类根据特定标头是否被选中而改变(基本上将加号图标改为减号图标)。Accordion部分的代码如下。我还没有尝试创建和JS或Jquery脚本。

<asp:Accordion 
    ID="Accordion1"   
    CssClass="accordion"  
    HeaderCssClass="acc_Header"  
    HeaderSelectedCssClass="acc_HeaderSelected"  
    ContentCssClass="accordionContent" 
    AutoSize ="none"
    RequireOpenedPane="false"
    FadeTransitions ="true"
    TransitionDureation="250"
    FramesPerSecond="40"
    SelectedIndex="-1"
    SuppressHeaderPostBack ="true"
    runat="server">
        <Panes>
            <asp:AccordionPane ID="SubsidencePane1" runat="server">
                <Header><span class="icon-plus-circle"></span>What is the definition of subsidence?</Header>
                <Content>
                    <p>This is where the ground beneath a structure has suffered downward movement, causing damage to the property.</p>  
                    <p>The movement of the ground is a consequence of some activity in the ground unconnected with the weight or presence of the building.</p>
                    <p>The damage that normally occurs in properties suffering from subsidence is cracking in the walls; these cracks can be diagonally, vertical or horizontal.</p>  
                    <p>However not all cracking is attributable to subsidence therefore a specialist surveyor is often called upon to determine the cause of the cracking to ensure the cause falls under the definition of subsidence.</p>
                </Content>
            </asp:AccordionPane>

Answer 1

使用以下代码解决了问题：

$(document).ready(function () {
        $(".accordion div").click(function () {
            $("> span", this).toggleClass("icon-plus-circle icon-minus-circle");
        });