顯示和隱藏一個問題的文本功能。 如何刪除最初的“少展示”元素？

Question

代碼按應有的方式運行。

我很難弄清楚如何最初從顯示屏上隱藏“少顯示”按鈕。

我在這里所做的只是抓住第一段並隱藏 rest 以在單擊繼續閱讀按鈕后顯示。 但是，顯示較少按鈕最初顯示在顯示屏上。 我想弄清楚如何刪除它。 我嘗試在.html 方法中將其拿走，但它根本沒有出現。

有什么建議么？

 jQuery(function() { //Read more / read less text functionality. Add "minimize" to any paragraph of text. var wrapPara = jQuery('.minimize p').nextAll().wrapAll('<div class="hide-body">'); var minimized_elements = jQuery('.minimize > p:first-child'); var continueReading = '<a href="#" class="btn btn-success mr-3 more">Continue reading</a>'; var showLess = '<a href="#" class="btn btn-success less">Show less</a>'; minimized_elements.each(function() { jQuery(this).html( minimized_elements.text() + '<span>... </span>' + continueReading + " " + showLess ).appendTo(".minimize"); }); jQuery('a.more', minimized_elements).click(function(event) { event.preventDefault(); jQuery(this).toggle(); jQuery(this).next().show(); jQuery(".hide-body").show(); }); jQuery('a.less', minimized_elements).click(function(event) { event.preventDefault(); jQuery(this).toggle(); jQuery(this).prev().show().prev().show(); jQuery(".hide-body").hide(); jQuery(".less").show(); }); });

 .hide-body { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="minimize"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus tenetur minus omnis expedita at possimus est mollitia iste dignissimos amet ipsam, magni nam eum ipsa explicabo qui, cumque totam repellat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus tenetur minus omnis expedita at possimus est mollitia iste dignissimos amet ipsam, magni nam eum ipsa explicabo qui, cumque totam repellat Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus tenetur minus omnis expedita at possimus est mollitia iste dignissimos amet ipsam, magni nam eum ipsa explicabo qui, cumque totam repellat</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea hic recusandae tenetur eos harum accusamus, fugiat quas quasi nulla nobis, sed tempora eveniet consequatur. Enim autem recusandae, iste est aut.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus tenetur minus omnis expedita at possimus est mollitia iste dignissimos amet ipsam, magni nam eum ipsa explicabo qui, cumque totam repellat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea hic recusandae tenetur eos harum accusamus, fugiat quas quasi nulla nobis, sed tempora eveniet consequatur. Enim autem recusandae, iste est aut.</p> </div>

Answer 1

您希望Show less最初隱藏鏈接，因此只需添加style="display:none;" 在其html中，如下所示。

var showLess = '<a href="#" class="btn btn-success less" style="display:none;">Show less</a>';

此外，我認為一旦用戶展開段落然后單擊Show less它應該hide該鏈接。 所以我評論jQuery(".less").show(); 線。

完整代碼如下。 你可以測試一下。

 jQuery(function() { //Read more / read less text functionality. Add "minimize" to any paragraph of text. var wrapPara = jQuery('.minimize p').nextAll().wrapAll('<div class="hide-body">'); var minimized_elements = jQuery('.minimize > p:first-child'); var continueReading = '<a href="#" class="btn btn-success mr-3 more">Continue reading</a>'; var showLess = '<a href="#" class="btn btn-success less" style="display:none;">Show less</a>'; minimized_elements.each(function() { jQuery(this).html( minimized_elements.text() + '<span>... </span>' + continueReading + " " + showLess ).appendTo(".minimize"); }); jQuery('a.more', minimized_elements).click(function(event) { event.preventDefault(); jQuery(this).toggle(); jQuery(this).next().show(); jQuery(".hide-body").show(); }); jQuery('a.less', minimized_elements).click(function(event) { event.preventDefault(); jQuery(this).toggle(); jQuery(this).prev().show().prev().show(); jQuery(".hide-body").hide(); // jQuery(".less").show(); // Commented to hide show less link once it clicked. }); });

 .hide-body { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="minimize"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus tenetur minus omnis expedita at possimus est mollitia iste dignissimos amet ipsam, magni nam eum ipsa explicabo qui, cumque totam repellat. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus tenetur minus omnis expedita at possimus est mollitia iste dignissimos amet ipsam, magni nam eum ipsa explicabo qui, cumque totam repellat Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus tenetur minus omnis expedita at possimus est mollitia iste dignissimos amet ipsam, magni nam eum ipsa explicabo qui, cumque totam repellat</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea hic recusandae tenetur eos harum accusamus, fugiat quas quasi nulla nobis, sed tempora eveniet consequatur. Enim autem recusandae, iste est aut.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus tenetur minus omnis expedita at possimus est mollitia iste dignissimos amet ipsam, magni nam eum ipsa explicabo qui, cumque totam repellat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea hic recusandae tenetur eos harum accusamus, fugiat quas quasi nulla nobis, sed tempora eveniet consequatur. Enim autem recusandae, iste est aut.</p> </div>