css - 使用 CSS 更改点击时的链接文本

Question

我的代码运行起来有点滑稽。如果您单击链接，它应该从 show more 变为 show less 然后再次单击时应该转到 show more 但是行为不是正如预期的那样。

#theLink.collapsed:before
{
    content:'Show less' ;
}
#theLink:before
{
    content:'Show more' ;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<a data-toggle="collapse" href="#intro" aria-expanded="false" aria-controls="intro" id="theLink"></a>

<div id="intro" class="collapse"> 
  Here comes the text...
</div>

Answer 1

您刚刚将 more 和 less 文本设置错了。当链接具有 collapsed 类时，需要显示 show more 文本。

我还初始化了默认情况下具有 collapsed 类的链接。

#theLink.collapsed:before
{
    content:'Show more' ;
}
#theLink:before
{
    content:'Show less' ;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<a class="collapsed" data-toggle="collapse" href="#intro" aria-expanded="false" aria-controls="intro" id="theLink"></a>

<div id="intro" class="collapse"> 
  Here comes the text...
</div>