Header 在展开时更改，但在折叠时不更改

Question

我有一个 expand/collapse 框，单击后 header 从 'Click to show more information...' 变为 'Click to show less information...'

我的问题是，当框折叠时，单击它不会变回 'Click to show more information...'。有没有办法编辑我必须实现的代码？

这是我的 fiddle 和代码：http://jsfiddle.net/HFcvH/25/

jQuery

jQuery(document).ready(function() {
  jQuery(".content").hide();
  //toggle the componenet with class msg_body
  jQuery(".heading").click(function() {
    jQuery(this).next(".content").slideToggle(500);
    jQuery(this).text("Click here for less information...");
  });
});

HTML

<p class="heading">Click here for more info...&nbsp;</p>
<div class="content">
  <span style="font-size: 14px; color: rgb(6, 78, 137);">
    <b>Documents Required</b>
  </span>
</div>

Answer 1

jQuery(document).ready(function() {
jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function() {
 var s = $(this);
jQuery(this).next(".content").slideToggle(500);
 s.html(s.text() == 'Click here for more info...' ? 'Click here for less information...' : 'Click here for more info...');
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="heading">Click here for more info...</p>
 <div class="content">
      <span style="font-size: 14px; color: rgb(6, 78, 137);">
          <b>Documents Required</b>
       </span>
 </div>

Answer 2

您为 <a> 设置的文本不正确。只需将其更改为：

<a href="#" id="more">Less about us</a>

就是这样！

Updated jsFiddle

Answer 3

我创建了一个更加一致的片段：

http://jsfiddle.net/HFcvH/27/

我更喜欢检查元素是否可见而不是文本检查，因为它更灵活

$('#more').click(function() {
    var s = $(this);
    $('#extra').slideToggle('fast', function(){
        s.html($(this).is(":visible") ? 'Less about us' : 'More about us');
    });
    return false;
}).trigger("click");

Answer 4

我对你的 fiddle 做了一些修改。我默认隐藏了 div，你可以在这里看到：

$('#extra').hide();
$('#more').click(function() {
    var s = $(this);
    $('#extra').slideToggle('fast', function(){
        s.html(s.text() == 'Less about us' ? 'More about us' : 'Less     about us');
    });
    return false;
});

Header 在展开时更改，但在折叠时不更改

Header change on expand, but not on collapse

html

jquery

expand

collapse