1

Bootstrap アコーディオン メニューhttp://twitter.github.io/bootstrap/javascript.html#collapseを使用しており、折りたたみ可能が折りたたまれていない場合はテキストの前に + 記号がほとんどなく、テキストの前に - 記号がほとんどない場合は折りたたみ可能は折りたたまれています。次のイベントリスナーを使用しています

$('.collapse').on('show', function(e){
        $('.collapsed-status').innerHTML('- ');
    });
    $('.collapse').on('hide', function(e){
        $('.collapsed-status').innerHTML('+ ');
    });

jQuery も含まれているため、これらのセレクターに問題はありません。私の折りたたみ式はこのように見えます

<div class="accordion-group produkty">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#produkty" href="#collapse1"><span class="collapsed-status">+ </span>Test</a>
                        <ul id="collapse1" class="collapse">
                        <li>›› Test</li>
                        <li>›› Test</li>
                        <li>›› Test</li>
                        <li>›› Test</li>
                        </ul>
                </div>

しかし、それは機能していません。私はそれを修正しようとしましたが、うまくいきません。ご協力いただきありがとうございます

4

1 に答える 1

2

次のコードを使用して、要素のクラスを切り替えることができます。

$('.accordion').collapse();

$('.accordion').on('shown hidden', function(e){
    $(e.target).siblings('.accordion-heading').find('.accordion-toggle i').toggleClass('icon-plus icon-minus');
});

上記のコードでは、ブートストラップを使用してから使用できるプラス アイコンとマイナス アイコンの表示を切り替えています。

次のように、各見出しの前にアイコンを追加するだけです。

<div class="accordion-heading">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
      <i class="icon-minus"></i> Heading 1
    </a>
</div>

結果は次のとおりです。

ここに画像の説明を入力

ここに jsFiddle があるので、ライブ デモを見ることができます: http://jsfiddle.net/s8dAd/4/

于 2013-06-09T17:01:22.740 に答える