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

pdsfdshx 于 2022-11-27 发布在其他

关注(0)|答案(4)|浏览(177)

我有一个展开/折叠框，单击时标题从“单击以显示更多信息...”变为“单击以显示较少信息...”
我的问题是，当框折叠时，它不会在单击时变回“单击以显示更多信息...”。有没有办法编辑代码，我必须使这种情况发生？
下面是我的小提琴和代码：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>

Html

来源：https://stackoverflow.com/questions/29629160/header-change-on-expand-but-not-on-collapse

4条答案

按热度按时间

bfrts1fy1#

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

赞(0）回复(0）举报 2022-11-27

xzv2uavs2#

第一个

赞(0）回复(0）举报 2022-11-27

4nkexdtk3#

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

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

就是这样！
Updated jsFiddle

赞(0）回复(0）举报 2022-11-27

mqkwyuun4#

我创建了一个更稳定的剪切：
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");

赞(0）回复(0）举报 2022-11-27

我来回答

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

4条答案

相关问题

热门标签

最新问答