我想在填充或展开 accordion 时更改文本。我在Bootstrap 4上。
目前它可以正常工作，但是第一次加载页面时，按钮文本不正确。
如果我展开和折叠，文本是正确的。
为什么页面加载时这不是正确的文本？
索引. html：
<div id="readmorecollapse">
<div class="collapse" id="collapserm" aria-expanded="false">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 border-bottom">
<p>TEST<p/>
</div>
</div>
</div>
<div id="readmorebutton">
<button role="button" class="btn btn-outline-dark btn-sm w-100" data-toggle="collapse" data-target="#collapserm" aria-expanded="false" aria-controls="collapserm">
</button>
</div>样式. css：
#readmorecollapse #collapserm.collapsing {
height: 7rem;
}
#readmorecollapse #collapserm.collapse:not(.show) {
display: block;
height: 7rem;
overflow: hidden;
}
#readmorecollapse #readmorebutton button.collapsed::after {
content: 'Afficher toutes les infos';
}
#readmorecollapse #readmorebutton button:not(.collapsed)::after {
content: 'Cacher les infos';
}
2条答案
按热度按时间vlf7wbxs1#
因为只有当button有
collapsed类时，after才有内容Afficher toutes les infos，而HTML开始时没有这个类，所以你只需要在默认html中添加collapsed类，就在这里：ffscu2ro2#
这是因为在加载页面后不久，您的按钮没有'collapted'类，即使它是折叠的。也许bootstrap.js只会在单击该按钮后触发事件来添加/删除类。如果您将index.html更正为如下，以便手动为按钮给予初始类，那么它将工作。