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');
 });

<强> Working Demo

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');

    });

更改范围文本以隐藏/显示在jQuery切换（）上

2 个答案: