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

Question

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

加载时，容器 1 以向上箭头图标打开（表示内容可以折叠）。加载时，容器 2 以向下图标关闭（表示内容可以展开）。

当我点击其中任何一个时，我想使用 slideToggle 和 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'背景图片来改变（也就是header的背景图片）

Answer 1

最简单的解决方案，无需 jQuery 动画：

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

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