Pertanyaan Menambahkan ikon terbuka / tertutup ke Twitter Bootstrap collapsibles (akordeon)


Saya sudah menyiapkan versi sederhana Bootstrap ini akordeon:

Akordeon sederhana: http://jsfiddle.net/darrenc/cngPS/

Saat ini ikon hanya menunjuk turun, tetapi apakah ada yang tahu JS apa yang diperlukan untuk diimplementasikan sehingga dapat mengubah kelas ikon menjadi:

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

... jadi itu poin naik kapan diperluas dan beralih kembali ke turun lagi ketika roboh, dan keempat?


75
2017-12-08 15:04


asal


Jawaban:


Inilah jawabannya bagi mereka yang mencari solusi di Bootstrap 3 (seperti saya).

Bagian 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>

Bagian 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");
});

Contoh akordeon:

Contoh akordeon Bootply


86
2017-10-21 16:48



Inilah pendekatan saya untuk Bootstrap 2.x. Itu hanya beberapa css. JavaScript tidak diperlukan:

    .accordion-caret .accordion-toggle:hover {
        text-decoration: none;
    }
    .accordion-caret .accordion-toggle:hover span,
    .accordion-caret .accordion-toggle:hover strong {
        text-decoration: underline;
    }
    .accordion-caret .accordion-toggle:before {
        font-size: 25px;
        vertical-align: -3px;
    }
    .accordion-caret .accordion-toggle:not(.collapsed):before {
        content: "▾";
        margin-right: 0px;
    }
    .accordion-caret .accordion-toggle.collapsed:before {
        content: "▸";
        margin-right: 0px;
    }

Cukup tambahkan kelas akordeon-caret ke div grup akordion, seperti ini:

<div class="accordion-group accordion-caret">
    <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
            <strong>Header</strong>
        </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
        <div class="accordion-inner">
            Content
        </div>
    </div>
</div>

45
2017-08-20 08:47



The Bootstrap Collapse memiliki beberapa Acara yang dapat Anda tanggapi:

$(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");
    });
});

42
2017-12-08 15:18



Gunakan CSSes pseudo-selector: setelah menggunakan Glyphicons terintegrasi Bootstrap 3 untuk a tidak ada jawaban JS dengan sedikit modifikasi pada HTML Anda ...

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

Menambahkan class="collapsed" ke tag anchor apa pun yang ditutup secara default.

Ini akan mengubah jangkar seperti

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

ke

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

Contoh Langsung CodePen

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

Screenshot

How it appears in JSBin


18
2018-05-21 01:19



Ditambahkan ke jawaban @muffls sehingga ini bekerja dengan semua keruntuhan bootstrap twitter dan membuat perubahan pada panah sebelum animasi dimulai.

$('.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");
});

Tergantung pada struktur HTML Anda, Anda mungkin perlu memodifikasi parent().


16
2018-02-24 14:03



Saya pikir kode-kode terbaik adalah ini:

  $('#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");
      });

10
2018-04-12 07:47



Jika ada yang tertarik ini adalah bagaimana Anda melakukannya dengan BS3 karena mereka mengubah nama acara:

$('.collapse').on('show.bs.collapse', function(){
  var i = $(this).parent().find('i')
  i.toggleClass('fa-caret-right fa-caret-down');
}).on('hide.bs.collapse', function(){
  var i = $(this).parent().find('i')
  i.toggleClass('fa-caret-down fa-caret-right');
});

Anda cukup mengubah nama kelas dalam contoh ke yang Anda gunakan dalam kasus Anda.


5
2017-11-26 12:18



Berikut adalah solusi saya yang lebih disempurnakan dari yang diposting oleh @ john-magnolia dan memecahkan beberapa masalah

/**
 * 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");
    });
}

Dan di sini adalah contoh markup:

<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>

3
2017-07-18 08:15



Solusi bootstrap v3 (di mana acara memiliki nama yang berbeda), juga hanya menggunakan satu pemilih jQuery (seperti yang terlihat sini):

$('.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');
});

3
2018-03-11 06:51