使用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文字只是错误的方式。当链接具有show more类时，需要显示collapsed文本。

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;