引導崩潰更改按鈕上點擊

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> 

在點擊按鈕，它會顯示裏面的「內容」的文字。我希望按鈕在完成後從「閱讀更多」更改爲「閱讀更少」。我發現了其他的例子，但他們似乎沒有崩潰功能，不知道如何實現它。

任何幫助或指針在正確的方向將不勝感激，謝謝。

Answer 1

我設法解決使用來自一個答案是：

jQuery: Change button text on click

感謝您的答覆反正！

Answer 2

爲什麼不只是創造這個你自己的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); 
}); 

希望我得到什麼你問，如果沒有，請提供一個小提琴。謝謝。

Answer 3

你可以嘗試做這樣的事情：

<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 4

我這樣做只使用HTML和CSS 看看這個例子。
https://codepen.io/iamandrewluca/pen/Emzzbm

Answer 5

此處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是摺疊按鈕或標籤