jquery - 如何在折叠时更改 Bootstrap Accordion 按钮标题(使用 CSS)

Question

我正在努力更改 Bootstrap Accordion 按钮，以便在折叠时，它应该显示“See Less -”。我相当确定我应该使用 css 属性 content 但我无法弄清楚在哪里。我的 html 看起来像这样:

    <h2>Some Heading</h2>
    <div style="display:table; margin:auto;">
       <ul style="margin-bottom: 0">
          <li class="services-list">Item 1</li>
          <li class="services-list">Item 2</li>
          <li class="services-list">Item 3</li>
       </ul>
    </div>
       <div id="collapse-custom" class="collapse">
          <div class="card card-block">
             <div style="display:table; margin:auto; width: 49%;">
                <ul>
                   <li class="services-list">Item 4</li>
                   <li class="services-list">Item 5</li>
                   <li class="services-list">Item 6</li>
                   <li class="services-list">Item 7</li>
                   <li class="services-list">Item 8</li>
                </ul>
             </div>
          </div>
       </div>
<button class="btn btn-primary" type="button" data-toggle="collapse" 
    data-target="#collapse-custom">See More<i class="fa fa-plus" 
    style="padding-left: 10px;"></i>
</button>

如有任何帮助，我们将不胜感激!谢谢。

Answer 1

一种对 Bootstrap 更友好的方法:

1. 为按钮提供一个 ID:

<button id="btn-service-list" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapse-custom">See More<i class="fa fa-plus" style="padding-left: 10px;"></i>

将此 JS 放入您的 .js 文件或同一页面上的标记内:

$('#collapse-custom').on('shown.bs.collapse',function(){
    $('#btn-service-list').text('- Show less');
});
$('#collapse-custom').on('hidden.bs.collapse',function(){
    $('#btn-service-list').text('+ Show more');
});