折叠时如何更改Bootstrap手风琴按钮标题（使用CSS）

Question

我正在努力更改 Bootstrap 手风琴按钮，以便在折叠时它应该显示“少看 -”。我相当确定我打算使用 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>

1. 将此 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');
});

Answer 2

给你的按钮一个类，比如 btn-toggle：

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

那么，如果你可以使用jquery，代码是：

<script type="text/javascript">
        $(function () {
             $(".btn-toggle").click(function () {
                    if($(".btn-toggle").text()=="See More"){
                        $(".btn-toggle").text("See Less -");
                    }
                    else {
                        $(".btn-toggle").text("See More +");
                    }
                });
          });       
</script>

希望能成功