问题描述
我想在填充或展开手风琴时更改文本。我正在使用 Bootstrap 4。
目前可以使用,但第一次加载页面时,按钮文本不正确。
如果我展开和折叠,文字是正确的。
为什么页面加载时这不是正确的文本?
index.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>
style.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';
}
解决方法
是因为你的 after
只有当按钮有 Afficher toutes les infos
类时才有内容 collapsed
并且你的 HTML 开始没有这个类,所以你只需要默认添加 collapsed
类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 collapsed" data-toggle="collapse" data-target="#collapserm" aria-expanded="false" aria-controls="collapserm">
</button>
</div>
,
那是因为在加载页面后不久,即使按钮已折叠,您的按钮也没有“折叠”类。也许 bootstrap.js 只会在单击该按钮后触发添加/删除类的事件。 如果您按如下方式更正 index.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 collapsed" data-toggle="collapse" data-target="#collapserm" aria-expanded="false" aria-controls="collapserm">
</button>
</div>