slideToggle容器以及按钮innerHTML

Question

我在点击时编码了一个slideToggle容器的按钮：

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

<强> Working Demo