it-roy-ru.com

Добавление значка открытия/закрытия в Twitter Bootstrap складные (гармошки)

Я установил эту простую версию Bootstrap аккордеон :

Простой аккордеон:http://jsfiddle.net/darrenc/cngPS/

В настоящее время значок указывает только на down, но кто-нибудь знает, что потребуется для реализации JS, чтобы изменить класс значка на:

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

... так что он указывает вверх, когда extended, и снова переключается обратно на down, когда свернут, и так четвертый?

80
Darren

Здесь ответ для тех, кто ищет решение в 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");
});

Пример аккордеона:

Пример с аккордеоном

91
Andrei Veve

Вот мой подход к Bootstrap 2.x. Это просто немного CSS. JavaScript не требуется:

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

Просто добавьте class accordion-caret в div группы accordion, вот так:

<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>
46
Martin Wickman

В 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");
    });
});
42
Philipp Hofmann

Используйте псевдо-селектор CSS: после использования встроенных в Bootstrap 3 глификонов для ответа no JS с небольшим изменением вашего HTML ...

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 Live Пример

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

Скриншот

How it appears in JSBin

20
bafromca

Добавлен в ответ @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().

16
John Magnolia

Я думаю, что лучшие коды это:

  $('#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
user2273425

Если кому-то интересно, вот как вы это делаете с BS3, так как они изменили имена событий:

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

Вы просто меняете имена классов в примере на те, которые вы используете в вашем случае.

6
rbsthlm

Решение начальной загрузки v3 (где события имеют разные имена), также использующее только один селектор jQuery (как видно здесь ):

$('.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
Geert

Вот мое решение, которое доработано по сравнению с @ 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>
3
Mikko Ohtamaa

Вероятно, наиболее читаемым решением для CSS было бы использование атрибута aria-extended. Помните, что вам нужно добавить aria-extended = "false" ко всем элементам collapse, так как это не устанавливается при загрузке (только при первом нажатии).

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.

3
Andreas Bergström

Вот как я это делаю без всяких 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);
}

Это структура HTML, взятая из примера Bootstrap

<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>
2
General Electric

Ничто из вышеперечисленного не сработало для меня, но я придумал это, и это сработало:

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 реализация:

<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>
      ...
2
Joshua Benson

На это было дано множество ответов, но то, что я придумал, было самым простым и легким для меня с Bootstrap 3 и потрясающим шрифтом. я только что сделал

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

Это просто переключает класс CSS иконки, которую я хочу показать. Я добавляю класс toggler к элементу, к которому я хочу применить это. Это может быть добавлено к любому элементу, который вы хотите переключить значок.

1
Micah Montoya

@RobSadler:

RE Мартин Викман CSS только для версии ...

Вы можете обойти эту проблему, добавив аккордеонную метку к тегу привязки и присвоив ей свернутый класс по умолчанию. Вот так:

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

Это сработало для меня.

1
RioBrewster

Для Bootstrup 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 когда нужно создать древовидное меню

1
Popov Andrey

Для решения только для CSS (и без значков), использующего Bootstrap 3, мне пришлось немного повозиться, основываясь на ответе Мартина Викмана выше. 

Я не использовал обозначение accordion- *, потому что это сделано с панелями в BS3. 

Кроме того, мне пришлось включить в исходный HTML aria-extended = "true" для элемента, который открывается при загрузке страницы. 

Вот 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; }

Вот мой санированный HTML:

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

Другое решение без 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>
0
Sebastian Sangervasi

Кратчайший ответ.

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>

И, конечно, вы можете использовать что угодно для селектора вместо тега привязки a, и вы также можете использовать определенный селектор вместо this, если ваш значок находится за пределами элемента, по которому вы щелкнули.

0
Junaid