Question

我有以下引导代码：

<div class="col-lg-4 col-md-4 col-sm-4" id="collapseTwo">
      <h2>What</h2> 
      <p>Find out what we do</p>
      <div id="what" class="collapse">
       <p>Text here.</p>

      <a class="btn btn-default" data-toggle="collapse" data-parent="#threeW" href="#what" role="button">Read More &raquo;</a>
    </div>

单击按钮，它将在“what”中显示文本。我希望按钮在完成后从“read more”更改为“Read less”。我找到了其他的例子，但它们似乎没有崩溃功能，也不确定如何实现它。

正确的方向提供任何帮助或指示，谢谢。

Answer 1

这里Bootstrap有崩溃事件。请在此处阅读：Bootstrap JS Collapse Reference

 <script>
    $('#extra-text').on('hidden.bs.collapse', function () {
      $('#read-more').text('Read More');
    });
    $('#extra-text').on('shown.bs.collapse', function () {
      $('#read-more').text('Read less');
    });
   </script>

这里extra-text是崩溃的div。 read-more是折叠按钮或标记

Answer 2

您可以尝试这样做：

<a class="btn btn-default" data-toggle="collapse" id="link" data-parent="#threeW" href="#what" role="button">Read More &raquo;</a>

<script>
$('#what').on('hidden.bs.collapse', function () {
  $('#link').text('Read Less');
})
</script>

Answer 3

我设法使用以下答案解决了这个问题：

jQuery: Change button text on click

感谢您的回复！

Answer 4

我只使用HTML和CSS完成此操作看看这个例子 https://codepen.io/iamandrewluca/pen/Emzzbm

Answer 5

为什么不为此创建自己的jquery侦听器，如

<a class="btn btn-default" class = "readbtn" data-toggle="collapse" data-parent="#threeW" href="#what" role="button">Read More &raquo;</a>

$('.readbtn').on('click', function() { 
  $(this).html('Read less);
});

希望我得到你所要求的，如果不是，请提供一个小提琴。谢谢。

Bootstrap折叠更改按钮可在点击时减少读取

5 个答案: