可折叠查看更多和更少查看按钮

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中找到更多详细信息

并且可以通过多种方式完善和重构此代码。