web-dev-qa-db-ja.com

プラスマイナス記号をbootstrap=アコーディオンに追加する方法

bootstrap=アコーディオン、最初のパネルは常に開いており、開いているパネルはクラスinを取得します。jqueryコードから、クラスにクラスinが含まれているかどうかを確認していますが、そのアンカーが強調表示されていますが、現在はすべてのアンカーが強調表示されています。

開いている最初のアンカーを強調表示し、残りの閉じたパネルにはいくつかの異なるスタイルが必要です。

ここにフィドルがあります： フィドル

ご覧のとおり、すべてのアンカータグが強調表示されています。最初のアンカーにいくつかの異なるスタイリングを取得してほしい。全体の考えは、アコーディオンにプラス/マイナス記号を追加することです。

jqueryhtmlcsstwitter-bootstrap-3
10
Leroy Mikenzi

collapse -bootstrap 3+

jQuery(function ($) {
    var $active = $('#accordion .panel-collapse.in').prev().addClass('active');
    $active.find('a').prepend('<i class="glyphicon glyphicon-minus"></i>');
    $('#accordion .panel-heading').not($active).find('a').prepend('<i class="glyphicon glyphicon-plus"></i>');
    $('#accordion').on('show.bs.collapse', function (e) {
        $('#accordion .panel-heading.active').removeClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
        $(e.target).prev().addClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
    })
});

それから

.panel-heading.active {
    background-color: green;
}

デモ： フィドル

あなたのコードで

$(document).ready(function () {
    if ($('div').filter(':not(in)')) {
        $('.panel-title a').addClass('active');
    }
});

Filter（）メソッドはjQueryオブジェクトを返すため、常に真実です。また、アクティブであるかどうかに関係なく、タイトルのすべてのアンカー要素にクラスを追加します。また、アコーディオンが変更されても変更しません。

7
Arun P Johny

上から@Arun P Johnyの回答にわずかな変更を加えました

最初の：<i>から<span>タグ、Bootstrap 3 documantationごと

Second：ユーザーが開いているタブを閉じ、クラスを削除し、マイナスアイコンをプラスアイコンに変更するための2番目のイベントチェックを追加しました

フィドル

var $active = $('#accordion .panel-collapse.in').prev().addClass('active');
$active.find('a').append('<span class="glyphicon glyphicon-minus pull-right"></span>');
$('#accordion .panel-heading').not($active).find('a').prepend('<span class="glyphicon glyphicon-plus pull-right"></span>');
$('#accordion').on('show.bs.collapse', function (e)
{
    $('#accordion .panel-heading.active').removeClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
    $(e.target).prev().addClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
});
$('#accordion').on('hide.bs.collapse', function (e)
{
    $(e.target).prev().removeClass('active').find('.glyphicon').removeClass('glyphicon-minus').addClass('glyphicon-plus');
});
8
Kender

同じパネルの折りたたみでプラス/マイナスクラスを変更したい場合は、この方法でjavascriptを使用できます（複数のパネルでも動作します）

<script>
var selectIds =$('#collapse1,#collapse2,#collapse3');
    $(function ($) {
    selectIds.on('show.bs.collapse hidden.bs.collapse', function () {
        $(this).prev().find('.fa').toggleClass('fa-plus fa-minus');
    })
});
</script>

このhtmlブロックで動作しています

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1"><i class="glyphicon glyphicon-minus"></i>Panel 1</a>
            </h4>
        </div>
    <div id="panel1" class="panel-collapse collapse in">
        <div class="panel-body">
            Contents panel 1
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                 <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2"><i class="glyphicon glyphicon-plus"></i>Panel 2</a>
            </h4>
        </div>
        <div id="panel2" class="panel-collapse collapse">
            <div class="panel-body">
                Contents panel 2
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel3"><i class="glyphicon glyphicon-plus"></i>Panel 3</a>
            </h4>
        </div>
        <div id="panel3" class="panel-collapse collapse">
            <div class="panel-body">
                Contents panel 3
            </div>
        </div>
    </div>
</div>

このjsFiddleの例を確認してください http://jsfiddle.net/navjottomer/8u57u/4/

6
nav

実際の例！ 折りたたまれた標準クラスをすべてのタブに追加し、次のようなCSSを使用できます。

.subnav-button .glyphicon-plus:before {
    content: "\2212";
}
.collapsed .glyphicon-plus:before {
    content:  "\2b";
}

.subnav-buttonが目的のボタンクラスであり、標準bootstrap=アイコンを使用します。クラスがボタン上にない場合は、プラスのコンテンツがマイナスのコンテンツに置き換えられます（タブが折りたたまれていない場合は常に）。

これは最初のHTMLコードです。

<button data-toggle="collapse" class="subnav-button collapsed" data-target="#subnav-110">
  <li class="renoi-first-floor">
    Sitemap&nbsp;
    <span class="glyphicon glyphicon-plus subnav-icon" aria-hidden="true"></span>
  </li>
</button>

これの唯一の欠点は、折りたたまれたタブでマイナスアイコンに変更しない限り、プラスアイコンを再び使用できないことです。必要に応じて、クラスを次のような新しいクラスにコピーできます。

.glyphicon-accordion-plus-minus < .glyphicon-plus

投稿の冒頭でCSSを新しいクラスに変更し、グリフィコンプラスの代わりにアコーディオンのHTMLコードで新しいクラスを使用しています。

6
Lightningsoul

これは私のCSSです

.my-button.collapse-nav-button:before {
    content: "\2212";
}
.collapsed .my-button.collapse-nav-button:before {
    content:  "\2b";
}

これは私のボタンです

<span class="my-button collapse-nav-button"></span>

これは、上記のボタンを備えた私の全体のアコーディオンhtmlです。

<div class="panel panel-default" ng-repeat="list in table_models">
 <div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapse1">
    <h1 class="panel-title">
        <span class="my-button collapse-nav-button"></span>
        <a data-toggle="collapse" data-target="#colapse1" href="#">Open/Close</a>       
    </h1>
 </div>
 <div class="panel-collapse collapse fade" id="collapse1">
    <div class="panel-body">
    <!--Accordion body -->
   </div>
 </div>
</div>

誰かが同じように答えたが、人々は彼に投票もしなかったし、彼はそれが欠点を持っているという引用でうまく終わった。彼が何について話していたかわからない。しかし、編集する代わりに、私は彼に賛成票を投じたが、きちんとした答えを追加できると思った。このためにJavaScriptコーディングは必要ないはずです。それはCSSとHTMLで簡単に行うことができるので、なぜあなたのページを散らかすのですか？

2
Sahib Khan

Htmlとcssの2行でこれを達成できました。

a.collapsed > span.expandedIndicator, a:not(.collapsed) > span.collpasedIndicator {
  display: none;
}
<span class="collapsedIndicator">+</span>
<span class="expandedIndicator">-</span>

プラスまたはマイナスにするHTMLにspanタグを配置してから、CSSルールをスタイルシートに追加します。 bootstrap 3以前を使用する場合、プレーンテキストのプラスとマイナスの代わりにグリフィコンを使用できます。これは最も簡単な解決策のようです。

1
ClarksonDev

Twitter BootstrapとjQueryは多くのものを変更し、自動化が必要になるため、これには新しい回答が必要です。

(function($) {
    $(document).ready(function(){
        if($(".collapse.in").length)
        {
            $(".collapse.in").prev().find(".panel-title a").append('<span class="glyphicon glyphicon-chevron-down pull-left"></span> ');
        }
        else
        {
            $(".collapse").prev().find(".panel-title a").append('<span class="glyphicon glyphicon-chevron-right pull-left"></span> ');
        }
        $('.panel-collapse').on({
            'hidden.bs.collapse' : function (e) {
                var active = $(this).prev().find(".panel-title a .glyphicon");
                active.removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-right");
            },
            'show.bs.collapse' : function (e) {
                var active = $(this).prev().find(".panel-title a .glyphicon");
                active.removeClass("glyphicon-chevron-right").addClass("glyphicon-chevron-down");
            }
        });
    });    
})(jQuery);

これはTwitter Bootstrapバージョン3.xおよびjQuery 1.10.3でうまく動作します。

0
Ivijan Stefan Stipić

はい、別の答えですが、私の場合は、開いている1つだけをアーカイブし、すべての残りが閉じているデータ親があるかどうかにかかわらず動作します。

    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                    <a data-toggle="collapse" href=".collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <i class="glyphicon glyphicon-minus"></i>
                        Collapsible Group Item #1
                    </a>
                </h4>
            </div>
            <div  class="panel-collapse collapse in collapseOne" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-Origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title">
                    <a class="collapsed" data-toggle="collapse" href=".collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        <i class="glyphicon glyphicon-plus"></i>
                        Collapsible Group Item #2
                    </a>
                </h4>
            </div>
            <div class="panel-collapse collapse collapseTwo" role="tabpanel" aria-labelledby="headingTwo">
                <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-Origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingThree">
                <h4 class="panel-title">
                    <a class="collapsed" data-toggle="collapse"  href=".collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        <i class="glyphicon glyphicon-plus"></i>
                        Collapsible Group Item #3
                    </a>
                </h4>
            </div>
            <div class="panel-collapse collapse collapseThree" role="tabpanel" aria-labelledby="headingThree">
                <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-Origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>

    </div>
    <script>
        jQuery(function ($) {
            $('[data-toggle="collapse"]').on('click', function() {
                var $this = $(this),
                        $parent = typeof $this.data('parent')!== 'undefined' ? $($this.data('parent')) : undefined;
                if($parent === undefined) { /* Just toggle my  */
                    $this.find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
                    return true;
                }

                /* Open element will be close if parent !== undefined */
                var currentIcon = $this.find('.glyphicon');
                currentIcon.toggleClass('glyphicon-plus glyphicon-minus');
                $parent.find('.glyphicon').not(currentIcon).removeClass('glyphicon-minus').addClass('glyphicon-plus');

            });
        });
    </script>
0
christian Nguyen

：activeリストに背景色を追加すると、あなたが探している差別化が得られますが、本当にボタンが必要な場合は、bootstrapはグリフィコンを使用します。

<button type="button" class="btn btn-green"><span class="glyphicon glyphicon-plus"></span> Add Close Day</button>
0
LOTUSMS