jQuery单击更改文本（也更改回）

Question

我有一个div，里面有ap，上面写着“折叠！”。当我单击div时，p的文本更改为“展开”。当我第二次单击div时，如何将其更改回“折叠”？

HTML：

<div id="fold">
    <p id="fold_p">Fold it</p>
</div>

jQuery的：

<script>
  $(document).ready(function () {
    $("#fold").click(function () {
      $("#fold_p").text("Expand it");
    } )
  } );                  
</script>

另外，是否可以使过渡淡化？任何帮助深表感谢 ：）

Answer 1

$(document).ready(function () {
    $("#fold").click(function () {
        $("#fold_p").fadeOut(function () {
            $("#fold_p").text(($("#fold_p").text() == 'Fold it') ? 'Expand it' : 'Fold it').fadeIn();
        })
    })
});

jsFiddle示例