Cara bertukar antara Lihat lebih banyak atau tutup sesuka hati apabila meninggalkan akhiran

Question

Berikut ialah kod saya Butang menetapkan bahawa akhiran mesti ditinggalkan Masalahnya sekarang ialah mengapa selepas saya klik lihat lagi, klik tutup yang ditambahkan pada akhiran adalah tidak sah

<div class="font">
<div class="description">
<p>超過50字很多很多很多很多很多很多很多很多很多很多很多很多字</p>
</div>
</div>

$(function () {
var $len = 20;
$(".font .description p").each(function () {
var $textold = $(this).text();
var $text = $(this).text().substring(0, $len - 1) + "";
if ($(this).text().length > $len) {
$(this).text($text).append("<button class='add'>..... See more</button>");
}
$('.add').click(function () {
$(this).closest(".font").find(".description p").text($textold).append("<button class='close'>close</button>");
});
$('.close').click(function () {
$(this).closest(".font").find(".description p").text($text).append("<button class='add'>..... See more</button>");
});
});
})