【发布时间】：2019-07-24 07:03:55
【问题描述】：
我创建了一个带有 + 和 - 符号的 boostrap 4 手风琴菜单。符号在折叠和未折叠时会发生变化。
我用 :after 添加符号
但是我想用一个按钮而不是'-，+'符号来替换它。 这样我就会有 2 个按钮，就像“查看更多”，“查看更少”（它可以是具有不同文本和背景的相同按钮）并在我单击时更改
我想不通。
我的代码和演示：https://www.codeply.com/go/sOps2WhtG5
<div class="container">
<div id="accordion" class="accordion">
<div class="card mb-0">
<div class="card-header collapsed" data-toggle="collapse" href="#collapseOne">
<a class="card-title">
Item 1
</a>
</div>
<div id="collapseOne" class="card-body collapse" data-parent="#accordion" >
<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat
craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</p>
</div>
<div class="card-header collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<a class="card-title">
Item 2
</a>
</div>
<div id="collapseTwo" class="card-body collapse" data-parent="#accordion" >
<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat
craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</p>
</div>
<div class="card-header collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<a class="card-title">
Item 3
</a>
</div>
<div id="collapseThree" class="collapse" data-parent="#accordion" >
<div class="card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. samus labore sustainable VHS.
</div>
</div>
</div>
</div>
我的 CSS
.accordion .card-header:after {
font-family: 'FontAwesome';
content: "\f068";
float: right;
}
.accordion .card-header.collapsed:after {
/* symbol for "collapsed" panels */
content: "\f067";
}
【问题讨论】：
-
尝试用'+'或'-'替换css内容属性
-
@AswinKumar 但我想用一个按钮代替它，而不仅仅是文本。因为我不能将按钮的 html 放到内容中，所以我想我必须将它与 js 或其他东西放在一起。
-
还是不清楚你在期待什么？
标签： javascript jquery twitter-bootstrap bootstrap-4 bootstrap-accordion