1

2 つのコンテナーがあり、それぞれに独自のヘッダーと矢印アイコンがあり、トグルを実行できる方向を示します。

読み込み時に、コンテナ 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」の背景画像を変更して変更するだけです（これはヘッダーの背景画像です）

4

1 に答える 1

4

jQuery アニメーションを使用しない最も単純なソリューション:

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

CSS3 トランジションを使用したデモ: http://jsfiddle.net/AMzfe/

于 2013-01-15T13:44:55.260 に答える