时间戳

首页 > 解决方案 > 可折叠查看更多和更少查看按钮

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

问题描述

我有一个包含 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>

标签： javascriptjqueryhtmlcssbootstrap-4

解决方案

这是你想要的吗？

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

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

推荐阅读