Twitter Bootstrap daraltılabilirlerine (akordeonlar) açık / kapalı simge ekleme

Bootstrap akordeonunun bu basit versiyonunu kurdum :

Basit akordeon: http://jsfiddle.net/darrenc/cngPS/

Şu anda simge yalnızca aşağıyı gösteriyor , ancak simgenin sınıfını şu şekilde değiştirmek için hangi JS'nin uygulanması gerektiğini bilen var mı:

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

... yani işaret ettiğinden kadar zaman genişletilmiş ve çoban için geri aşağı böylece dördüncü çökmesi sonucunda tekrar ve?

İşte Bootstrap 3'te (benim gibi) çözüm arayanlar için cevap.

HTML bölümü:

<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 bölümü:

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

Örnek akordeon:

Bootply akordeon örneği

İşte Bootstrap 2.x için yaklaşımım. Bu sadece bir css. JavaScript gerekmez:

    .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;
    }

Akordeon grubu div öğesine sınıf akordeon-şapka eklemeniz yeterlidir , örneğin:

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

Bootstrap Collapse'ın tepki verebileceğiniz bazı Olayları vardır:

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

CSSes sözde seçicisini kullanın: Bootstrap 3'ün entegre Glyphicon'larını HTML'nizde küçük değişikliklerle JS yok yanıtı için kullandıktan sonra ...

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"Varsayılan olarak kapalı olan tüm bağlantı etiketlerine ekleyin .

Bu gibi çapalar dönecek

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

içine

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

CodePen Canlı Örneği

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

Ekran görüntüsü

@ Muffls yanıtına eklendi, böylece bu, tüm twitter önyükleme çökmesi ile çalışır ve animasyon başlamadan önce okta değişiklik yapar.

$('.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 yapınıza bağlı olarak parent(),.

Bence en iyi kodlar bunlar:

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

Eğer ilgilenen varsa, olay isimlerini değiştirdikleri için BS3 ile bunu nasıl yaparsınız:

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

Örnekteki sınıf adlarını, durumunuzda kullandıklarınızla değiştirirsiniz.

En okunaklı yalnızca CSS çözümü, muhtemelen arya genişletilmiş özniteliği kullanmak olacaktır. Yüklemede ayarlanmadığından (yalnızca ilk tıklamada) tüm daraltma öğelerine aria-expanded = "false" eklemeniz gerekeceğini unutmayın.

HTML:

<h2 data-toggle="collapse" href="#collapseId" aria-expanded="false">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="glyphicon glyphicon-chevron-down"></span> Title
</h2>

CSS:

h2[aria-expanded="false"] span.glyphicon-chevron-down,
h2[aria-expanded="true"] span.glyphicon-chevron-right
{
    display: none;
}

h2[aria-expanded="true"] span.glyphicon-chevron-down,
h2[aria-expanded="false"] span.glyphicon-chevron-right
{
    display: inline;
}

Bootstrap 3.x ile çalışır.

İşte @ john-magnolia tarafından yayınlanan bir çözümden daha da rafine edilmiş ve bazı sorunlarını çözen çözümüm

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

Ve işte örnek işaret:

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

Sadece bir jQuery seçici kullanan ( burada görüldüğü gibi ) bir bootstrap v3 çözümü (olayların farklı adlara sahip olduğu ):

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

Ben js olmadan böyle yaparım.

Glifikon-üçgen-sağ simgesini kullandım ancak başka herhangi bir simgeyle çalışıyor, yaptığı şey, panel açıkken veya değilken simgeye 90 derece döndürme uygulamaktır. Bunun için Bootstrap 3.3.5 kullanıyorum .

CSS Kodu

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

Bu, Bootstrap örneğinden alınan HTML yapısıdır

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

Yukarıdakilerin hiçbiri benim için işe yaramadı ama bunu buldum ve işe yaradı:

function toggleChevron(el) {
  if ($(el).find('i').hasClass('icon-chevron-left'))
      $(el).find('.icon-chevron-left').removeClass("icon-chevron-left").addClass("icon-chevron-down");
  else 
      $(el).find('.icon-chevron-down').removeClass("icon-chevron-down").addClass("icon-chevron-left");
}

HTML uygulaması:

<div class="accordion" id="accordion-send">
  <div class="accordion-group">
    <div class="accordion-heading" onClick="toggleChevron(this)">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-send" href="#collapse-refund">
        <i class="icon icon-chevron-right"></i> Send notice
      </a>
      ...

@RobSadler:

RE Martin Wickman'ın yalnızca CSS sürümü ...

Bağlantı etiketine akordeon işareti koyarak ve varsayılan olarak daraltılmış bir sınıf vererek bu sorunu aşabilirsiniz. Şöyle:

<div class="accordion-group">
<div class="accordion-heading">
    <a class="accordion-toggle accordion-caret collapsed" 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>

Bu benim için çalıştı.

Bootstrup 3.2 + FontAwesome için

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

Bazen böyle yazmalısın. Öyleyse

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

Gizle menüsüne bastığınızda otomatik olarak oluşturulur (class = "daraltıldı").

bir ağaç menüsü oluşturmanız gerektiğinde ps

Bu pek çok şekilde yanıtlandı, ancak benim için en basit ve en kolay olanı Bootstrap 3 ve harika yazı tipi ile oldu. az önce yaptım

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

Bu sadece göstermek istediğim simgenin CSS sınıfını değiştirir. Ben sınıf eklemek toggler ben bu uygulamak istediğiniz öğeye. Bu, bir simgeyi değiştirmek istediğiniz herhangi bir öğeye eklenebilir.

Daraltma işlevinin kendisini kullanan başka bir javascript içermeyen çözüm:

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

Bootstrap 3 kullanan yalnızca CSS (ve simgesiz) bir çözüm için, Martin Wickman'ın yukarıdaki cevabına dayanarak biraz uğraşmak zorunda kaldım.

BS3'teki panellerle yapıldığı için akordeon- * gösterimini kullanmadım.

Ayrıca, sayfa yüklenirken açılan öğeye ilk HTML aria-expanded = "true" 'yu ​​eklemem gerekiyordu.

İşte kullandığım CSS.

.accordion-toggle:hover { text-decoration: none; }
.accordion-toggle:hover span, .accordion-toggle:hover strong { text-decoration: underline; }
.accordion-toggle:before { font-size: 25px; }
.accordion-toggle[data-toggle="collapse"]:before { content: "+"; margin-right: 0px; }
.accordion-toggle[aria-expanded="true"]:before { content: "-"; margin-right: 0px; }

İşte sterilize edilmiş HTML'm:

<div id="acc1">    
    <div class="panel panel-default">
        <div class="panel-heading">
            <span class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" aria-expanded="true" data-parent="#acc1" href="#acc1-1">Title 1
                    </a>
            </span>
        </div>
        <div id=“acc1-1” class="panel-collapse collapse in">
            <div class="panel-body">
                Text 1
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <span class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#acc1” href=“#acc1-2”>Title 2
                    </a>
            </span>
        </div>
        <div id=“acc1-2” class="panel-collapse collapse">
            <div class="panel-body">
                Text 2                  
            </div>
        </div>
    </div>
</div>

Mümkün olan en kısa cevap.

HTML

<a data-toggle="collapse" data-parent="#panel-quote-group" href="#collapseQuote">
    <span class="toggle-icon glyphicon glyphicon-collapse-up"></span>
</a>

JS:

<script type="text/javascript">
 $(function () {
     $('a[data-toggle="collapse"]').click(function () {
     $(this).find('span.toggle-icon').toggleClass('glyphicon-collapse-up glyphicon-collapse-down');
     })
 })
 </script>

Ve elbette, bağlantı etiketi yerine seçici için herhangi bir şey akullanabilir thisve simgenizin tıklanan öğenizin dışında olması yerine belirli bir seçici de kullanabilirsiniz .

İşte biraz materyal tasarım, bootstrap 4.5 / 5 alpha ve tamamen javascript olmayan bir şekilde genişletilebilir bir bölüm oluşturan bir çözüm.

Baş bölümü stili

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

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

Vücut 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>