JQuery 在点击时更改文本(也改回)

Question

我有一个 div，里面有一个 p，上面写着“折叠它!”。当我单击 div 时，p 的文本变为“展开它”。当我第二次点击 div 时，它会变回“Fold it”怎么办？

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 example