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

Question

我有一个包含 10 个元素的列表要显示。在显示其中三个问题后，我想要一个查看更多按钮，单击该按钮后，将显示其余问题，查看更多按钮将其名称更改为查看更少，反之亦然。我是网络开发新手，对如何实现这一点感到困惑。在这方面的任何帮助都会非常有帮助。谢谢。

当前代码:

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

并且这段代码可以通过多种方式进行完善和重构。