如何使用Bootstrap手风琴按钮更改（-，+）符号？

Question

我创建了带有+和-符号的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"; 
}

Answer 1

在您的示例中，您将div.card-header用作折叠切换；您是否打算将切换触发器仅限于按钮？如果是这样，请考虑将您的更改a.card-title为 div.card-title并在其中添加button。然后将CSS调整为.card-header button:after。请注意，您只应href在锚标记上使用属性（在上div.card-header），并将其用于button元素data-target。您可以在此处查看文档。

如果您打算使用更复杂的标记（不仅仅是纯文本标签），那么您将需要一个js解决方案。（我也可以提供协助）

高温超导

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