我创建了一个带有 + 和 - 符号的 boostrap 4 Accordion 菜单。符号在折叠和展开时会发生变化。
我用 :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";
}
最佳答案
在您的示例中，您使用 div.card-header 作为折叠开关；您是否打算将切换触发器仅限于按钮？如果是这样，请考虑将您的 a.card-title 更改为 div.card-title 并在其中添加您的 button。然后将您的 css 调整为 .card-header button:after。请注意，您应该只在 anchor 标记(您的 div.card-header 上有它)和 button 上使用 href 属性您将使用 data-target 的元素。您可以查看documentation here .
如果您的意图是拥有更复杂的标记(不仅仅是纯文本标签)，那么您将需要一个 js 解决方案。 (我也可以协助)
HTH
.accordion .card-header button:after {
font-family: 'FontAwesome';
content: "\f068";
}
.accordion .card-header button.collapsed:after {
content: "\f067";
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div id="accordion" class="accordion">
<div class="card mb-0">
<div class="card-header">
<div class="card-title">
Item 1
<button type="button" class="btn btn-primary float-right collapsed" data-toggle="collapse" data-target="#collapseOne"></button>
</div>
</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">
<div class="card-title">
Item 2
<button type="button" class="btn btn-primary float-right collapsed" data-toggle="collapse" data-target="#collapseTwo"></button>
</div>
</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>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>关于javascript - 如何使用按钮 Bootstrap Accordion 更改 (-,+) 符号？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54958319/