3

新しいサイトで Twitter Bootstrap を使用していますが、トグルにプラス/マイナスを追加する必要があります。セクションは EE チャネル エントリ タグでラップされ、キャリア全体をループしてアコーディオン リストを作成します。私のアコーディオンコードは次のとおりです。

{if count == "1"}
<div class="accordion" id="my_accordion">
{/if}
    <div class="accordion-group">
        <div class="accordion-heading">
            <h2><a class="accordion-toggle" data-parent="#my_accordion" data-toggle="collapse" href="#collapse{count}">{title} <span class="pull-right">+</span></a></h2>
        </div>
        <div class="accordion-body collapse" id="collapse{count}">
            <div class="accordion-inner">
                {careers-summary}
                <p><a href="{page_uri}" class="btn btn-small">Learn More</a></p>
            </div>
        </div>
    </div>
{if count == total_results}
</div>
{/if}

私が書き始めた、動作したくないと思われる JavaScript は次のとおりです (以下の新しいコードを参照)。

私がやろうとしているのは、アコーディオンの開閉時にプラス記号をマイナスに、またはその逆に変更することだけです。開始した JavaScript を見れば見るほど、実際にテキストが変更されたとしても、別のアコーディオン トグルをクリックしたときに必ずしも変更されるとは限りません。これを機能させ、複数のアコーディオン トグルで動作するのに十分な柔軟性を持たせる最良の方法は何ですか?

更新javascript にいくつかの変更を加え、Twitter Bootstrap が提供するイベントを使用しました。また、data-parent 属性を削除して、アコーディオンではなく折りたたみ可能なトグルのように動作するようにしました。新しいコードは次のとおりです。

$('.accordion').on('hide', function () {
    $('.accordion-toggle span').html('+');     
})
$('.accordion').on('show', function () {
    $('.accordion-toggle span').html('-');     
})

これにより実際にテキストが変更されますが、クリックしたトグルだけでなく、すべてのトグルのプラス/マイナス記号が変更されます。カスタム クラスを各スパンに追加することはできますが、トグルごとに show.hide 関数を作成することなく、javascript でこれをターゲットにする方法がわかりません。それは効率が悪いように思われ、これを行うためのより簡単な方法があるはずです。

4

3 に答える 3

4

上記の関数の代わりに、ブートストラップshowとhideそのようなイベントを使用する必要があります。click

$(".accordion-body").on("show",function(event){
        $('span', $(this).prev()).text('-');
});
$(".accordion-body").on("hide",function(event){
        $('span', $(this).prev()).text('+');
});

JSフィドルはこちら。

于 2013-01-11T16:09:12.707 に答える
1

Bootstrap 3では簡単な解決策が機能しました。

$('[data-toggle="collapse"]').click(function(e) {
    $(e.target).find('.icon-minus-sign, .icon-plus-sign').toggleClass("icon-minus-sign icon-plus-sign");
});
于 2013-10-22T18:49:27.150 に答える