Question

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

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

我认为我应该使用click和html函数，但不知道如何安排它们。

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';
    });
});

清洁＆amp;简单：）

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'));
  }
});

单击按钮时更改按钮文本w / Bootstrap

4 个答案: