jquery 動畫在第一次點擊時不起作用

Question

我正在嘗試使用 animation 實現閱讀更多按鈕。 Animation 在第一次單擊后工作正常，但在第一次單擊時，似乎沒有考慮 animation 方法。

以下代碼的JSFiddle鏈接。

這是我的代碼：

 var text = $('.content') const originalHeight = text.height(); $(".show-more a").on("click", function() { var $this = $(this); var $content = $this.parent().prev("div.content"); var linkText = $this.text().toUpperCase(); var fullHeight = text[0].scrollHeight; if (linkText === "SHOW MORE") { linkText = "Show less"; $content.addClass('showContent').removeClass('hideContent'); text.animate({ 'height': fullHeight }); } else { linkText = "Show more"; $content.addClass('hideContent').removeClass('showContent'); text.animate({ 'height': originalHeight }); }; $this.text(linkText); });

 div.text-container { margin: 0 auto; width: 75%; }.hideContent { overflow: hidden; line-height: 1em; height: 2em; }.showContent { line-height: 1em; height: auto; }.content { text-align: justify; }.show-more { text-align: center; display: inline; float: right; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="text-container"> <div class="content hideContent"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </div> <div class="show-more"> <a href="#">Show more</a> </div> </div>

Answer 1

嘗試這個：

 var text = $('.content') const originalHeight = text.height(); //====================== //add this line text.css("height",originalHeight ); //====================== $(".show-more a").on("click", function() { var $this = $(this); var $content = $this.parent().prev("div.content"); var linkText = $this.text().toUpperCase(); var fullHeight = text[0].scrollHeight; if (linkText === "SHOW MORE") { linkText = "Show less"; $content.addClass('showContent').removeClass('hideContent'); text.animate({ 'height': fullHeight }); } else { linkText = "Show more"; $content.addClass('hideContent').removeClass('showContent'); text.animate({ 'height': originalHeight }); }; $this.text(linkText); });

 div.text-container { margin: 0 auto; width: 75%; transition: all 0.15s ease-out; }.hideContent { overflow: hidden; line-height: 1em; height: 2em; }.showContent { line-height: 1em; height: auto; }.content { text-align: justify; }.show-more { text-align: center; display: inline; float: right; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="text-container"> <div class="content hideContent"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </div> <div class="show-more"> <a href="#">Show more</a> </div> </div>

Answer 2

Javascript ===是區分大小寫的比較。 您的代碼是if (linkText === "SHOW MORE")您的主要文本是Show more 。 就這樣。