88

Bootstrapアコーディオンのこの単純なバージョンをセットアップしました。

シンプルなアコーディオン: http://jsfiddle.net/darrenc/cngPS/

現在、アイコンはdownのみを指していますが、アイコンのクラスを次のように変更するために実装する必要があるJSを知っている人はいますか?

<i class="icon-chevron-up"></i>

...展開すると上を指し、折りたたむと再び下にトグルするように、というように 4 番目ですか?

4

20 に答える 20

94

これは、Bootstrap 3 で解決策を探している人 (私のように) に対する答えです。

HTML 部分:

<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
    <span class="glyphicon glyphicon-minus"></span>
  </button>
</div>
<div id="demo" class="collapse in">Some dummy text in here.</div>

js 部分:

$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});

アコーディオンの例:

Bootply アコーディオンの例

于 2013-10-21T16:48:35.740 に答える
42

Bootstrap Collapse には、反応できるイベントがいくつかあります。

$(document).ready(function(){    
    $('#accordProfile').on('shown', function () {
       $(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-up");
    });

    $('#accordProfile').on('hidden', function () {
       $(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down");
    });
});
于 2012-12-08T15:18:20.740 に答える
21

CSSes 疑似セレクターを使用します:Bootstrap 3 の統合された Glyphicons を使用して、HTML を少し変更してJS の回答を作成した後...

CSS

.panel-heading [data-toggle="collapse"]:after
{
    font-family: 'Glyphicons Halflings';
    content: "\e072"; /* "play" icon */
    float: right;
    color: #b0c5d8;
    font-size: 18px;
    line-height: 22px;

    /* rotate "play" icon from > (right arrow) to down arrow */
    -webkit-transform: rotate(-90deg);
    -moz-transform:    rotate(-90deg);
    -ms-transform:     rotate(-90deg);
    -o-transform:      rotate(-90deg);
    transform:         rotate(-90deg);
}
.panel-heading [data-toggle="collapse"].collapsed:after
{
    /* rotate "play" icon from > (right arrow) to ^ (up arrow) */
    -webkit-transform: rotate(90deg);
    -moz-transform:    rotate(90deg);
    -ms-transform:     rotate(90deg);
    -o-transform:      rotate(90deg);
    transform:         rotate(90deg);
}

HTML

class="collapsed"デフォルトで閉じられているアンカー タグに追加します。

これにより、次のようなアンカーが回転します

<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">

の中へ

<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">

CodePen のライブ例

http://codepen.io/anon/pen/VYobER

スクリーンショット

JSBin での表示方法

于 2014-05-21T01:19:54.173 に答える
16

@muffls の回答に追加されたので、これはすべての Twitter ブートストラップの崩壊で機能し、アニメーションが開始する前に矢印に変更を加えます。

$('.collapse').on('show', function(){
    $(this).parent().find(".icon-chevron-left").removeClass("icon-chevron-left").addClass("icon-chevron-down");
}).on('hide', function(){
    $(this).parent().find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-left");
});

HTML 構造によっては、parent().

于 2013-02-24T14:03:41.417 に答える
10

最適なコードは次のとおりだと思います。

  $('#accordion1').collapse({
    toggle: false
  }).on('show',function (e) {
        $(e.target).parent().find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-up");
      }).on('hide', function (e) {
        $(e.target).parent().find(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down");
      });
于 2013-04-12T07:47:38.477 に答える
3

これは、jsなしで行う方法です。

アイコン glyphicon-triangle-right を使用しましたが、他のどのアイコンでも機能します。パネルが開いているかどうかに関係なく、アイコンに 90 度の回転を適用します。これにはBootstrap 3.3.5を使用しています。

CSSコード

h4.panel-title a {
    display: block;

}
h4.panel-title a.collapsed .glyphicon-triangle-right {
        color: #ada9a9 !important;
        transform: rotate(0deg);
}
h4.panel-title a .glyphicon-triangle-right {
        color: #515e64 !important;
        transform: rotate(90deg);
}

これは Bootstrap の例から取った HTML 構造です

<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 role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                            Proven Expertise
                                            <span class="glyphicon glyphicon-triangle-right pull-right" aria-hidden="true"></span>
                                        </a>
                                    </h4>
                                </div>
                                <div id="collapseOne" class="panel-collapse collapse in" 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>
于 2015-10-02T17:14:06.003 に答える
3

ブートストラップ v3 ソリューション (イベントの名前が異なる場合) も、jQuery セレクターを 1 つだけ使用します (ここで見られるように):

$('.accordion').on('hide.bs.collapse show.bs.collapse', function (n) {
    $(n.target).siblings('.panel-heading').find('i.glyphicon').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});
于 2014-03-11T06:51:59.700 に答える
3

これは、@ john-magnolia によって投稿されたものからさらに洗練され、その問題のいくつかを解決する私のソリューションです

/**
 * Toggle on/off arrow for Twitter Bootstrap collapsibles.
 *
 * Multi-collapsible-friendly; supports several collapsibles in the same group, on the same page.
 */
function animateCollapsibles() {

    $('.collapse').on('show', function() {
        var $t = $(this);
        var header = $("a[href='#" + $t.attr("id") + "']");
        header.find(".icon-chevron-right").removeClass("icon-chevron-right").addClass("icon-chevron-down");
    }).on('hide', function(){
        var $t = $(this);
        var header = $("a[href='#" + $t.attr("id") + "']");
        header.find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-right");
    });
}

マークアップの例を次に示します。

<div class="accordion" id="accordion-send">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-send" href="#collapse-refund">
                <i class="icon icon-chevron-right"></i> Send notice
            </a>
        </div>
        <div id="collapse-refund" class="accordion-body collapse">
            <div class="accordion-inner">
                <p>Lorem ipsum Toholampi city</p>
            </div>
        </div>
    </div>
</div>
于 2013-07-18T08:15:12.333 に答える
1

これにはさまざまな方法で回答がありましたが、私が思いついたのは、Bootstrap 3 と font awesome を使用した最も単純で簡単な方法でした。今やりました

$('a.toggler').on('click', function () {$('i', this).toggleClass('fa-caret-up');});

これは、表示したいアイコンの CSS クラスを切り替えるだけです。これを適用したい項目にクラストグルを追加します。これは、アイコンを切り替えたいアイテムに追加できます。

于 2015-11-24T15:38:31.550 に答える
1

Bootstrap 3.2 + FontAwesome の場合

$(document).ready(function(){    
    $('#accordProfile').on('shown.bs.collapse', function () {
       $(".fa-chevron-down").removeClass("fa-chevron-down").addClass("fa-chevron-up");
    });

    $('#accordProfile').on('hidden.bs.collapse', function () {
       $(".fa-chevron-up").removeClass("fa-chevron-up").addClass("fa-chevron-down");
    });
});

そう書かなければならないこともあります。もしそうなら 

$('.collapsed span').removeClass('fa-minus').addClass('fa-plus');

非表示メニューを押すと、自動的に生成されます (class="collapsed")。

ps ツリー メニューを作成する必要がある場合

于 2014-09-27T22:50:59.363 に答える
0

折りたたみ機能自体を使用する別の JavaScript を使用しないソリューション:

/* Prevent block display and transition animation */
.expand-icon.collapse.in,
.collapse-icon.collapse.in {
  display: inline; }
.expand-icon.collapsing {
  display: none; }

/* HTML Toggler with glyphicons */
<a data-toggle="collapse" href=".my-collapse">
 <span class="my-collapse collapse-icon collapse in">
  <span class="glyphicon glyphicon-collapse-up"></span>
 </span>
 <span class="my-collapse expand-icon collapse">
  <span class="glyphicon glyphicon-expand"></span>   
 </span>
</a>
于 2016-06-10T22:38:45.913 に答える
0

これは、多少マテリアル デザイン、ブートストラップ 4.5/5 アルファ、および完全に非 JavaScript を使用して拡張可能なセクションを作成するソリューションです。

ヘッド部のスタイル

<style>
[data-toggle="collapse"] .fa:before {
    content: "\f077";
}

[data-toggle="collapse"].collapsed .fa:before {
    content: "\f078";
}
</style>

本文のhtml

<div class="pt-3 pb-3" style="border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; cursor: pointer;">
<a href="#expandId" class="text-dark float-right collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="expandId">
    <i class="fa" aria-hidden="false"></i>
</a>
<a href="#expandId" class="text-dark collapsed" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="expandId">Expand Header</a>
<div class="collapse" id="expandId">
    CONTENT GOES IN HERE
</div>
于 2020-08-29T19:45:17.350 に答える