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

Question

我试图通过单击Span元素来隐藏/显示div。 我正在尝试更改跨度内的文本以在hide（元素显示时）和show（元素隐藏时）之间切换。 我相信我有一个良好的开端，但是现在我陷入了使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');
 });

工作演示

Answer 2

有点晚了，但这里有另一种方式:) 演示 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');

    });