展开时标题更改，但折叠时不更改答案

【问题标题】：Header change on expand, but not on collapse展开时标题更改，但折叠时不更改
【发布时间】：2015-06-20 04:05:24
【问题描述】：

我有一个展开/折叠框，单击时标题会从“单击以显示更多信息...”变为“单击以显示较少信息...”

我的问题是，当框折叠时，单击时它不会变回“单击以显示更多信息...”。有没有办法编辑我必须实现的代码？

这是我的小提琴和代码：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>

【问题讨论】：

欢迎来到 StackOverlow！请确保您了解rules。如果您发现以下任何一个答案足够好，请点赞并接受。
@JoelAlmeida，将代码块放在a bulleted list 中没有意义。
@gunr2171 原始帖子有一个项目符号列表。那是我的错。
@JoelAlmeida，确实如此，我没有注意到。您的编辑必须同时赶上另一个编辑。那就不用担心了。

标签： jquery html collapse expand

【解决方案1】：

我对你的小提琴做了一些改动。我默认隐藏 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;
});

【讨论】：

【解决方案2】：

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>

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。

【解决方案3】：

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

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

就是这样！

Updated jsFiddle

【讨论】：

【解决方案4】：

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

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

【讨论】：