0

Bootstrap の最新バージョンと組み込みのアコーディオン機能を使用して、ボタンのテキストを別のものに変更する方法はありますか?

例: 「Find Cafe」というテキストを表示するボタンがあり、クリックするとアコーディオンが開き、リストが表示されます。ただし、テキストを変更して近くに表示したい。

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();
4

4 に答える 4

3

これには Bootstrap を使用しません。jQuery を使用するだけです。

$('a.accordion-toggle').click(function() {
    if ( $(this).next('.accordion-body').hasClass('in') ) {
        $(this).text('Close');
    } else {
        $(this).text('Find Cafe');
    }
});
于 2013-04-23T17:46:10.087 に答える
2

jqueryを使用してこれを行うことができます

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

クリーン＆シンプル:)

于 2016-02-16T08:28:56.527 に答える
1

テンプレートで個々のテキストを構成する必要がある場合は、プレゼンテーションを機能から分離します。

$('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'));
  }
});
于 2014-04-17T13:58:02.400 に答える