jQuery - toggleClass向上箭头和向下箭头图标更改
jQuery - toggleClass向上箭头和向下箭头图标更改
提问于 2013-01-15 21:30:34
我有两个容器，每个容器都有自己的标头和箭头图标，以指示切换可以发生的方向。
加载时，容器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‘的背景图片来改变(这是标题的背景图片)
回答 1
Stack Overflow用户
发布于 2013-01-15 21:44:55
最简单的解决方案，没有jQuery动画：
$(function(){
$('.header').click(function(){
$(this).closest('.container').toggleClass('collapsed');
});
});使用CSS3转换的演示：http://jsfiddle.net/AMzfe/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14338866
复制相关文章
相似问题
腾讯云开发者
