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

fnvucqvd 于 2022-12-08 发布在 Bootstrap

关注(0)|答案(3)|浏览(162)

我有一个用bootstrap创建的布局，有这个“阅读更多”按钮来扩展文本。当文本扩展时，它会变得“显示更少”。我的问题是，当用户单击“显示更少”按钮时，button-text首先变回“阅读更多”，只有THEN文本（段落）是崩溃的。而且这个时间差是明显的。但是有没有办法让按钮在文本折叠后改变它的文本，或者以某种方式使这个时间差不那么明显呢？
在我的js文件中，只有按钮文本更改的代码，而文本切换完全是在 Bootstrap 上，也许我不应该为这个特定的按钮使用 Bootstrap ？
请注意，我的问题并不是将按钮文本从“阅读更多”更改为“显示更少”本身，我知道有很多解决方案。
“阅读更多”按钮的标记：

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

JS为按钮：

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

});

twitter-bootstrap

来源：https://stackoverflow.com/questions/46023277/bootstrap-read-more-button-how-to-collapse-and-change-button-text-with-no-ti

3条答案

按热度按时间

wbrvyc0a1#

我有同样的问题，我解决了它通过一点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';
}

此处示例-〉Read Less - Bootstrap 4

赞(0）回复(0）举报 2022-12-08

wswtfjt72#

使用collapse事件，看起来hidden.bs.collapse是你所需要的，因为它在元素关闭后触发。查看文档以了解详细信息。

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

赞(0）回复(0）举报 2022-12-08

xqk2d5yq3#

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代码：

$(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;
    });
});

赞(0）回复(0）举报 2022-12-08

我来回答

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

3条答案

相关问题

热门标签

最新问答