JavaScript 显示更多文本

Question

我使用此代码来隐藏和显示一些新闻，当用户单击标题或图标( images/onmenos.jpg ， images/onmais.jpg )时，在“teste1”的此示例中，所有文本都会显示，在本例中我只有一个链接“点击”，一切正常；但是当我在所有文本中都有一个链接(如本示例)时，该链接会将文本“Click”更改为图标 images/onmenos.jpg...而我不想要这个...

我认为 JavaScript 假设所有拥有 "<a href..." 的东西显示图标...

<script type="text/javascript">
$(document).ready(function() { 
$('.toggle_container').hide();

$("span.trigger a").click(function() {

 $(".toggle_container", $(this).parent()).animate({ opacity: 1.0 },200).slideToggle(500, function() {


$("a", $(this).parent()).html($(this).is(':visible') ? '<img src="images/onmenos.jpg">' : '<img src="images/onmais.jpg">');


}); 
});

});
</script>

HTML

<font style="font-size:18px; line-height:18px; color:#ffffff;">teste1</font>
<span class="trigger" style=" margin-left:655px;"><a href="javascript:;"><img src="images/onmais.jpg" width="27" height="27" border="0"></a>
<div class="toggle_container">
<a class="teste" href="http://www.teste.com" target="_new"><font style="font-size:18px; line-height:18px; color:#ffffff;">Click</font></a><p />
</div>
</span>

http://jsfiddle.net/2cmRa/

现在我需要一个更改...当我有多个项目时，当您打开一个项目时，如果它们仍然打开，则关闭其他项目

Answer 1

为“更多”按钮使用一个类。也许是这个jsFiddle Update会帮助你的。

修改后的 HTML:

<a class="more" href="javascript:;">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR6YRl-z_3JYYWCGScfalkWjL8_iYrvNHXK3WehdDIlp5vnUXpa" width="27" height="27" border="0" />
</a>

修改后的JS:

$("a.more", $(this).parent()).html($(this).is(':visible') ? '<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSPWCyjrSVQF2vapeyiywRtx5EzIFERSrcI7fodWeSMF9fEKWE0">' : '<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR6YRl-z_3JYYWCGScfalkWjL8_iYrvNHXK3WehdDIlp5vnUXpa">');