Bootstrap“阅读更多”按钮-如何折叠和更改按钮文本而没有时差？

Question

我有一个使用引导程序创建的布局，并且有一个“阅读更多”按钮可以扩展文本。文本展开后，将变为“显示较少”。我的问题是，当用户单击“显示较少”按钮时，按钮文本首先变回“阅读更多”，然后仅折叠THEN文本（段落）。这个时差很明显。但是，是否有一种方法可以使按钮在折叠后更改其文本，或者以某种方式使此时差不那么明显？

在我的js文件中，只有用于更改按钮文本的代码，并且文本切换完全在引导程序上进行，也许我不应该对这个特定按钮使用引导程序？

请注意，我的问题不在于将按钮文本本身从“阅读更多”更改为“显示更少”，我知道周围有很多解决方案。

标记“更多”按钮：

<p>Initital text <span id="moreText" class="collapse">more text here...</span><a id="readMore" data-toggle="collapse" href="#moreText">Read More</a> 

按钮的JS：

$(function() {
    $('#readMore').click(function() { 
     $(this).text(function(i,def) {
        return def=='Read More' ?  'Show Less' : 'Read More';
    });
})

});

Answer 1

我有同样的问题，我通过一些CSS和Bootstrap 4解决了

#summary {
  font-size: 14px;
  line-height: 1.5;
}

#summary p.collapse:not(.show) {
    height: 42px !important;
    overflow: hidden;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
}

#summary p.collapsing {
    min-height: 42px !important;
}

#summary a.collapsed:after  {
    content: '+ Read More';
}

#summary a:not(.collapsed):after {
    content: '- Read Less';
}

这里的例子-> Readless-Bootstrap 4