Question

我正在努力改变一个Bootstrap手风琴按钮，以便在折叠时，它应该说＆＃34; See Less - ＆＃34;。我很确定我的意思是使用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

更友好的Bootstrap方式：

给按钮一个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');
});

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>

希望它能运作

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

2 个答案: