jquery - 使用 Bootstrap 单击按钮时更改按钮文本

Question

使用最新版本的 Bootstrap 和内置手风琴功能，有没有办法将按钮的文本更改为不同的内容？

例如：我有一个显示文本“查找咖啡馆”的按钮，单击时手风琴打开并显示一个列表。但是，我希望文本更改为显示关闭。

我在想我应该使用clickandhtml函数，但不知道如何安排它们。

HTML：

<div id="accordion" class="accordion">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Find Cafe
            </a>
            <div id="collapseOne" class="accordion-body collapse in">
                 <div class="accordion-inner">
                    Anim pariatur cliche...
                 </div>
            </div>
     </div>
</div>

JS：

 $('.collaspe').collapse();

Answer 1

您不会为此使用 Bootstrap。您只需使用 jQuery：

$('a.accordion-toggle').click(function() {
    if ( $(this).next('.accordion-body').hasClass('in') ) {
        $(this).text('Close');
    } else {
        $(this).text('Find Cafe');
    }
});

Answer 2

您也可以在没有 JS 的情况下完成此操作

.toggle-accordion:before {

   content:'see more'

}

.toggle-accordion[aria-expanded="true"]:before {

    content:'close';

}

Answer 3

您可以使用 jquery 执行此操作

  $('#your-button-id').click(function(){
    $(this).text(function(i,old){
        return old=='Find Cafe' ?  'Close' : 'Find Cafe';
    });
});

干净简单:)

Answer 4

如果您需要在模板中配置单个文本，将演示与功能分开。

$('body').on('click', '[data-toggle="collapse"]', function() {
   console.log(this);
  var _self = $(this);
  var _content = $(_self.attr('data-target'));
  var _originalText = _self.attr('data-text');

  if ( _content.hasClass('in') ) {
      _self.text(_self.attr('data-textexp'));
  } else {
      _self.text(_self.attr('data-text'));
  }
});