slideToggle容器与按钮innerHTML

Question

我编写了一个按钮，当点击时滑动切换容器:

<a href="#" id="toggleButton">innerHTML</a>
<div id="toggleBody">Body Container</div>

使用jQuery slideToggle调用函数:

$('#toggleBody').hide();
$('#toggleButton').click(function() {
    $('#toggleBody').slideToggle(200);
});

我需要将按钮innerHTML切换到其他东西以及切换的toggleBody容器。任何帮助吗?

代码片段:http://jsfiddle.net/9kyr76y1/

Answer 1

您可以使用.text()回调函数获取当前文本并与新值切换:

$('#toggleButton').click(function() {
 $(this).text(function(i, text){
      return text === "innerHTML" ? "outerHTML":"innerHTML";
  })
 $('#toggleBody').slideToggle(200);
});

演示工作