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

Question

I have a layout created with bootstrap and there is this “read more” button that expands text. 我有一个使用引导程序创建的布局，并且有一个“阅读更多”按钮可以扩展文本。 When text is expanded it changes to “show less”. 文本展开后，将变为“显示较少”。 My problem is that when user clicks to “show less” button, button-text firstly changes back to “read more” and only THEN text(paragraph) is collapsed. 我的问题是，当用户单击“显示较少”按钮时，按钮文本首先变回“阅读更多”，然后仅折叠THEN文本（段落）。 And this time difference is noticeable. 这个时差很明显。 But is there a way to make button change its text after the text is collapsed or somehow make this time difference less noticeable? 但是，是否有一种方法可以使按钮在折叠后更改其文本，或者以某种方式使此时差不那么明显？

In my js file there's only code for button text changing, and text toggling is entirely on bootstrap, maybe I shouldn't use bootstrap for this particular button? 在我的js文件中，只有用于更改按钮文本的代码，并且文本切换完全在引导程序上进行，也许我不应该对这个特定按钮使用引导程序？

Note that my problem is not about changing button text from “read more” to “show less” itself, I know there's a lot of solutions around. 请注意，我的问题不在于将按钮文本本身从“阅读更多”更改为“减少显示”，我知道周围有很多解决方案。

Markup for "read more" button: 标记“更多”按钮：

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

JS for button: 按钮的JS：

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

});

Answer 1

I had the same problem, I solved it through a little of css and Bootstrap 4 我有同样的问题，我通过一些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';
}

Here example -> Read Less - Bootstrap 4 这里的例子-> Readless-Bootstrap 4

Answer 2

Use collapse events, it seems that hidden.bs.collapse it is what you need as it fires after the element has closed. 使用折叠事件，似乎hidden.bs.collapse是您需要的，因为在元素关闭后将其触发。 Check documentation for details. 检查文档以了解详细信息。

$('#myElementWithCollpse').on('hidden.bs.collapse', function () {
//set text here
})

Answer 3

HTML Code: HTML代码：

<html>
  <head>
    <title>jQuery Read More/Less Toggle Example</title>
  </head>
  <body>
    <span class="more">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </span>
    <br><br>
    <div class="more">
      Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.
    </div>
  </body>
</html>

JS Code: JS代码：

$(document).ready(function() {
    // Configure/customize these variables.
    var showChar = 100;  // How many characters are shown by default
    var ellipsestext = "...";
    var moretext = "Show more >";
    var lesstext = "Show less";


    $('.more').each(function() {
        var content = $(this).html();

        if(content.length > showChar) {

            var c = content.substr(0, showChar);
            var h = content.substr(showChar, content.length - showChar);

            var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

            $(this).html(html);
        }

    });

    $(".morelink").click(function(){
        if($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });
});

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

问题描述

3 个解决方案

解决方案1
5 2017-12-04 22:16:37

解决方案2
1 2017-09-03 12:14:01

解决方案3
0 2017-09-03 12:12:49

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

问题描述

3 个解决方案

解决方案1 5 2017-12-04 22:16:37

解决方案2 1 2017-09-03 12:14:01

解决方案3 0 2017-09-03 12:12:49

解决方案1
5 2017-12-04 22:16:37

解决方案2
1 2017-09-03 12:14:01

解决方案3
0 2017-09-03 12:12:49