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

Question

我正在努力改变Bootstrap手风琴按钮，以便在折叠时应该显示“See Less - ”。我很确定我打算使用css属性内容，但不能为我的生活弄清楚在哪里。我的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

给您的按钮一类说BTN-切换：

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

希望它会工作

Answer 2

更引导友好的做法：

1. Give按钮的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'); 
 
});