jQuery-toggleClass 向上箭头和向下箭头图标更改

Question

我有两个容器，每个容器都有自己的标题和箭头图标来指示可以进行切换的方向。

加载时，容器 1 打开并带有向上箭头图标(表示内容可以折叠)。加载时，容器 2 用向下图标关闭(表示内容可以展开)。

当我单击其中任何一个时，我想使用lideToggle 和toggleClass 来防止另一个框关闭，从而允许用户查看两个框内的内容并能够折叠两个框。

如何确保单击每个标题时箭头图标交替出现？

最重要的部分是让容器 1 在装载时打开，而容器 2 在装载时关闭。 (导致加载时出现相反的图标)

提前致谢!

<xsl:template name="Alert-Wrapper">
<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row" />
<div id="alert-wrapper">

    <div class="accordion-header expandable-header">
        <span class="accordion-header-style">New Alerts</span>
    </div>


    <div class="alert-item-container expandable-content">
        <xsl:for-each select="$Rows">
            <xsl:call-template name="alert-items"/>
        </xsl:for-each>    

        <div class="view-more-alerts">
            <a href="www.google.com">
                <span class="view-more-image"><img src="/mountney.co.uk/images/Red-Arrow-View-More.png"></img></span>
                <span class="view-more-text">View more alert items</span>
            </a>
        </div>              
    </div>          
    <div class="clear"></div>
</div>

以下 jquery 处理内容的展开和折叠。

    $('.expandable-header').click(function(){

    $(this).next('.expandable-content').slideToggle('slow');    

    });

我只需要修改'.accordion-icon'背景图片即可更改(即标题的背景图片)

Answer 1

最简单的解决方案，没有 jQuery 动画:

$(function(){
  $('.header').click(function(){
    $(this).closest('.container').toggleClass('collapsed');
  });
});

使用 CSS3 过渡的演示:http://jsfiddle.net/AMzfe/