可折疊查看更多和更少查看按鈕

Question

我有10個項目要顯示的列表。 在顯示其中三個問題之后，我希望顯示一個“查看更多”按鈕，然后單擊其余按鈕，然后顯示“查看更多”按鈕，將其名稱更改為“查看較少”，反之亦然。 我是Web開發人員的新手，對如何實現此功能感到困惑。 在這方面的任何幫助將非常有幫助。 謝謝。

當前代碼：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button> <div id="demo" class="collapse"> Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> 

Answer 1

這是你想要的嗎？

 function changeName(){ if($("#collapseButton").html()=="View more"){ $("#collapseButton").html("View less"); } else{ $("#collapseButton").html("View more"); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <h2>Simple Collapsible</h2> <p>Click on the button to toggle between showing and hiding content.</p> <div> <li> 1 </li> <li> 2 </li> <li> 3 </li> </div> <div id="collapsible" class="collapse"> <li> 4... </li> <li> 5... </li> <li> 6... </li> <li> 7... </li> <li> 8... </li> <li> 9... </li> <li> 10... </li> </div> </div> <div align="right"> <button id="collapseButton" type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapsible" onclick="changeName()">View more</button> </div> 

您可以在https://www.w3schools.com/bootstrap/bootstrap_collapse.asp中找到更多詳細信息

並且可以通過多種方式完善和重構此代碼。