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'背景图片进行更改（这是标题的背景图片）

Answer 1

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

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

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

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

1 个答案: