更改跨度文本以在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');

    });