更改跨度文本以在 jQuery toggle() 上隐藏/显示

Question

strong text我正在尝试通过单击 Span 元素来隐藏/显示 div。我正在尝试更改跨度内的文本以在隐藏（显示元素时）和显示（隐藏元素时）之间切换。我相信我有一个良好的开端，但我现在坚持让 jQuery 脚本工作。任何帮助将不胜感激。

这是我的jsFiddle：http://jsfiddle.net/3AnPX/

HTML

<span class="help_target">Open</span>
<div class="help_content">Content 1</div>

<span class="help_target">Open</span>
<div class="help_content">Content 2</div>

<span class="help_target">Open</span>
<div class="help_content">Content 3</div>

<span class="help_target">Open</span>
<div class="help_content">Content 4</div>

jQuery

$(".help_content").hide();

$(".help_target").click(function () {
    $(this).next('.help_content').toggle();
    $(this).toggle(function () {
        $(this).text('Open');
    }, function() {
        $(this).text('Close');
    });
});

更新：

试图在我的实际网站上实现这一点，但它不起作用：http://jsfiddle.net/PzkxA/

Answer 1

您可以检查切换元素的可见性以更改文本：

if(!$(this).next('.help_content').is(":visible") )
    $(this).text('Open');
else
    $(this).text('Close');

更新：

 $("span.hideshow").click(function () {
  $(this).closest('.profilestats-courseblock').find('.profilestats-course-badges').toggle();
  $(this).text($(this).text() == 'Close' ? 'Open' : 'Close');
 });

Working Demo

Answer 2

有点晚了，但这里有另一种方式:) demo http://jsfiddle.net/q76dk/

所以您可能只想更改文本，因为.help_content 在span 之外

希望这符合您的需求。 :)

代码

$(".help_content").hide();
$(".help_target").click(function () {
    $(this).next('.help_content').toggle();

    $(this).text($(this).text() == 'Close' ? 'Open' : 'Close');

    });