Question

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p class="collapse" id="collapseSpeed">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
<a data-toggle="collapse" href="#collapseSpeed" aria-expanded="false" aria-controls="collapseSpeed">more...</a>

这很好用。我可以点击more展开并显示第二段。但奇怪的是，它仍然说more。有没有办法在扩展后将其更改为less？

Answer 1

您可以条件更改innerHTML以切换文本：

$( "a" ).click(function() {
        var $this = $(this);
        $this.toggleClass("open");
    
        if ($this.hasClass("open")) {
            $this.html("less...");
        } else {
            $this.html("more...");
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<a href="#">more...</a>

此代码将（一旦点击）将一个类切换到'open'的A标签（如果再次单击，则取消）然后运行条件，如果有一个打开的类连接到A标记，然后html标记A的{{1}}将被更改。否则，如果没有课程，$this将被更改回来。

一旦扩展，如何将可折叠的“更多”更改为“更少”？

1 个答案: